/* =========================================
   OVERVIEW — Aquaignis (SWELL Child)
   - Circles: Drop → Split → Reveal
   - CTA underline animation
   - Fullscreen Modal (Left/Right backgrounds + Left headline text only)
   ========================================= */

/* = Variables ===================================== */
:root{
  --ov-size: clamp(220px, 38vw, 520px);
  --ov-gap: clamp(48px, 8vw, 160px);
  --t-drop: 1.2s;
  --t-split: .9s;
  --t-reveal: .6s;
}

/* = Wrapper ======================================= */
#overview.ov{ position: relative; }
.ov__head{ text-align:center; max-width:880px; margin:0 auto; }

/* = Stage (circles) ================================ */
.ov-stage{
  position: relative;
  min-height: 86vh;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
}
.ov-bubble{
  width: var(--ov-size);
  height: var(--ov-size);
  border-radius: 50%;
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  will-change: transform, opacity;
}
.ov-bubble--left{
  background: center/cover no-repeat url('http://aquaignis-company.jp.testrs.jp/dev/wp-content/uploads/2025/10/left_noise-scaled.jpg');
}
.ov-bubble--right{
  background: center/cover no-repeat url('http://aquaignis-company.jp.testrs.jp/dev/wp-content/uploads/2025/10/right_noise-scaled.jpg');
}
/* Hide core bubble after split (safety) */
.ov-stage.is-split .ov-bubble--core{ display:none !important; opacity:0 !important; pointer-events:none !important; }
/* Inner text reveal */
.ov-bubble__inner{ width:82%; transform:translateY(6px); opacity:0; transition:opacity var(--t-reveal) ease, transform var(--t-reveal) ease; }
.ov-stage.is-reveal .ov-bubble__inner{ opacity:1; transform:none; }
/* Typography inside bubbles */
.ov-bubble__h.jp{ font-weight:800; letter-spacing:.04em; margin-bottom:.2em; }
.ov-bubble__en{ font-size:.92rem; opacity:.9; margin-bottom:.9em; }
.ov-bubble__list{ list-style:none; margin:0 0 1.2em; padding:0; line-height:1.7; font-size:.92rem; }

/* = CTA underline (STATEMENT) ====================== */
#overview .ov-bubble__cta,
#overview .ov-bubble__cta *, #overview .ov-bubble__cta::before, #overview .ov-bubble__cta::after{
  -webkit-animation:none !important; animation:none !important; animation-name:none !important; animation-duration:0s !important; animation-iteration-count:1 !important; transition:none 0s !important;
}
#overview .ov-bubble__cta{ appearance:none; border:none; background:transparent; color:#fff; font-weight:800; letter-spacing:.08em; cursor:pointer; position:relative; padding-bottom:8px; text-decoration:none !important; overflow:hidden; }
#overview .ov-bubble__cta::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:rgba(255,255,255,.95); opacity:1; transform-origin:left center;
  -webkit-animation:ovUnderlineLR 2.1s linear infinite !important; animation:ovUnderlineLR 2.1s linear infinite !important;
}
@-webkit-keyframes ovUnderlineLR{ 0%{width:0;transform:none;opacity:1} 70%{width:100%;transform:none;opacity:1} 100%{width:100%;transform:translateX(100%);opacity:0} }
@keyframes ovUnderlineLR{ 0%{width:0;transform:none;opacity:1} 70%{width:100%;transform:none;opacity:1} 100%{width:100%;transform:translateX(100%);opacity:0} }
@media (hover:hover){ #overview .ov-bubble__cta:hover::after{ -webkit-animation-duration:1.6s !important; animation-duration:1.6s !important; } }
@media (prefers-reduced-motion: reduce){ #overview .ov-bubble__cta::after{ -webkit-animation:none !important; animation:none !important; width:100%; transform:none; opacity:1; } }


/* === Overview Modal 背景（左右固定） === */
.ov-modal[data-ov-modal] .ov-modal__bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('http://aquaignis-company.jp.testrs.jp/dev/wp-content/uploads/2025/10/left_noise-scaled.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none !important;
}

/* 左：見出し（白文字のみ／右本文の上端と合わせる） */
.ov-modal__headline{
  grid-column: 1; grid-row: 1;
  z-index: 2;
  display: inline-block;

  margin-top: var(--ov-top, clamp(48px,12vh,200px)) !important;
  margin-left: clamp(16px,3.3vw,48px) !important;
  padding: 0 !important;

  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;

  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.35;
  font-size: clamp(22px, 2.6vw, 42px);
}
.ov-modal__headline::before,
.ov-modal__headline::after{ content:none !important; display:none !important; }

/* 右：本文（縦方向センター） */
.ov-modal__body{
  grid-column: 2; grid-row: 1;
  z-index: 2;
  min-height: 100vh;
  max-width: 760px;
  padding: clamp(16px,3.3vw,48px);
  background: none !important; border-radius: 0 !important;

  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.ov-modal__content{ line-height: 2; font-size: clamp(14px, 1.15vw, 18px); }
.ov-modal__content p{ margin: 0 0 .7em; }

/* 閉じるボタン（右上固定） */
.ov-modal__close{
  position: fixed; top: clamp(12px,2.2vw,24px); right: clamp(12px,2.2vw,24px);
  z-index: 100000;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color:#fff; width:auto; height:auto; padding:6px;
  font-size: clamp(24px,4vw,36px); line-height:1; cursor:pointer;
}
@media (hover:hover){ .ov-modal__close:hover{ opacity:.85; } }
.ov-modal__close::before, .ov-modal__close::after{ content:none !important; }

/* SWELL の見出し装飾を完全OFF（保険） */
.ov-modal h1, .ov-modal h2, .ov-modal h3, .ov-modal .ov-modal__title{
  border:0 !important; box-shadow:none !important; background:none !important; text-decoration:none !important;
}
.ov-modal h1::before, .ov-modal h1::after,
.ov-modal h2::before, .ov-modal h2::after,
.ov-modal h3::before, .ov-modal h3::after,
.ov-modal .ov-modal__title::before,
.ov-modal .ov-modal__title::after{ content:none !important; display:none !important; }

/* = Responsive ==================================== */
@media (max-width: 959px){
  .ov-stage{ min-height: 96vh; }
  :root{ --ov-gap: clamp(28px, 9vw, 80px); }

  .ov-modal{ grid-template-columns: 1fr; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .ov-modal__bg{ height: 44vh; }
  .ov-modal__body{ min-height: auto; padding: clamp(16px,4vw,24px); }
  .ov-modal__headline{
    margin-top: clamp(16px,4vw,24px) !important;
    margin-left: clamp(16px,4vw,24px) !important;
    font-size: clamp(20px, 5vw, 28px);
  }

  /* Circles (mobile animation tuning) */
  .ov-stage{
    --ov-size: clamp(320px, min(82vw, 70vh), 560px);
    --ov-gap:  clamp(16px, 7vw, 48px);
    --t-drop: 1.0s; --t-split: .8s; --t-reveal: .5s;
    min-height: calc(var(--ov-size) * 2 + var(--ov-gap));
  }
  .ov-bubble__inner{ width: 88%; }
  .ov-stage .ov-bubble{
    left:50% !important; top:50% !important; width:var(--ov-size); height:var(--ov-size);
    backface-visibility:hidden;
    transform: translate3d(-50%, -70%, 0) scale(.98) !important;
    opacity:0;
    transition: transform var(--t-drop) cubic-bezier(.2,.8,.2,1), opacity var(--t-drop) ease;
  }
  .ov-stage.is-drop .ov-bubble{ transform: translate3d(-50%, -50%, 0) scale(1) !important; opacity:1; }
  .ov-stage.is-split .ov-bubble--left{  transform: translate3d(-50%, -50%, 0) translateY(-54%) !important; }
  .ov-stage.is-split .ov-bubble--right{ transform: translate3d(-50%, -50%, 0) translateY(54%) !important; }
  .ov-stage.is-reveal .ov-bubble__inner{ opacity:1 !important; transform:none !important; }
}

/* = Motion preference ============================== */
@media (prefers-reduced-motion: reduce){
  .ov-bubble__inner, .ov-modal{ transition: none !important; }
}

/* = Minor perf hint ================================ */
.is-animating .ov-bubble{ will-change: transform, opacity; }