/* =========================================================
   Next Home LP — Loader + Section Reveal Animations
   Additive only. Does not modify existing visual design.
   ========================================================= */

/* -------- Loader Overlay -------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 700px at 50% 40%, #fff6d9 0%, #fff 55%);
  overflow: hidden;
  transition: clip-path 1.6s cubic-bezier(.77,0,.18,1), opacity .65s ease 1.4s;
  clip-path: inset(0 0 0 0);
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
}
.loader::before {
  width: 420px; height: 420px;
  left: 8%; top: 10%;
  background: radial-gradient(circle, #f4c622 0%, transparent 70%);
  animation: loaderOrb 9.6s ease-in-out infinite alternate;
}
.loader::after {
  width: 360px; height: 360px;
  right: 10%; bottom: 12%;
  background: radial-gradient(circle, #e67e22 0%, transparent 70%);
  animation: loaderOrb 11.2s ease-in-out infinite alternate reverse;
}
@keyframes loaderOrb {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-20px) scale(1.08); }
}

.loader__stage {
  position: relative;
  width: 280px;
  height: 280px;
  display: grid;
  place-items: center;
}

.loader__logo {
  position: relative;
  z-index: 3;
  width: 180px;
  height: auto;
  animation: loaderLogo 4.2s cubic-bezier(.2,.8,.2,1) infinite;
  filter: drop-shadow(0 10px 20px rgba(11,59,217,.18));
}
@keyframes loaderLogo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.loader__ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px dashed rgba(11,59,217,.5);
  animation: loaderSpin 13s linear infinite;
}
.loader__ring--2 {
  inset: -10px;
  border-style: dotted;
  border-color: rgba(244,126,34,.55);
  animation-duration: 22s;
  animation-direction: reverse;
}
.loader__ring--3 {
  inset: -40px;
  border: 1px solid rgba(11,59,217,.18);
  animation-duration: 35s;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.loader__text {
  position: absolute;
  left: 0; right: 0;
  bottom: -48px;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .55em;
  color: #0b3bd9;
}
.loader__text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: loaderChar 1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes loaderChar {
  to { opacity: 1; transform: translateY(0); }
}

.loader__bar {
  position: absolute;
  left: 50%;
  bottom: -92px;
  width: 220px;
  height: 3px;
  background: rgba(11,59,217,.14);
  border-radius: 99px;
  overflow: hidden;
  transform: translateX(-50%);
}
.loader__bar::before {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #f4c622, #e67e22, #0b3bd9);
  border-radius: 99px;
  animation: loaderBar 2.2s cubic-bezier(.77,0,.18,1) infinite;
}
@keyframes loaderBar {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Loader exit — split-sweep reveal */
.loader.is-done {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
}
.loader.is-done .loader__logo {
  animation: loaderExit 1.4s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes loaderExit {
  to { transform: scale(1.4) translateY(-40px); opacity: 0; }
}

body.is-loading { overflow: hidden; height: 100vh; }

/* =========================================================
   Reveal base (IntersectionObserver toggles .is-in)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform .9s cubic-bezier(.19,1,.22,1),
              clip-path 1.1s cubic-bezier(.77,0,.18,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Variants */
[data-reveal="fade-up"]   { transform: translateY(40px); }
[data-reveal="fade-down"] { transform: translateY(-40px); }
[data-reveal="fade-left"] { transform: translateX(-60px); }
[data-reveal="fade-right"]{ transform: translateX(60px); }
[data-reveal="zoom-in"]   { transform: scale(.88); }
[data-reveal="zoom-soft"] { transform: scale(.96); }
[data-reveal="rise"]      { transform: translateY(80px) scale(.98); }
[data-reveal="tilt-in"]   { transform: translateY(40px) rotate(-2deg) scale(.97); }
[data-reveal="flip-up"]   { transform: perspective(800px) rotateX(30deg) translateY(40px); transform-origin: bottom; }

/* Mask reveal — apply clip-path to inner children so IO still intersects */
[data-reveal="mask"] { opacity: 1; }
[data-reveal="mask"] > * {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.77,0,.18,1);
}
[data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }

/* Stagger container: children animate in sequence */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1),
              transform .8s cubic-bezier(.19,1,.22,1);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .55s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .65s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .75s; }

/* Stagger with rotation pop for FAQ tiles */
[data-stagger="pop"] > * {
  transform: translateY(40px) scale(.9) rotate(-3deg);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.34,1.56,.64,1);
}
[data-stagger="pop"].is-in > * { transform: none; }

/* Stagger from right (case cards etc.) */
[data-stagger="right"] > * {
  transform: translateX(60px);
}

/* =========================================================
   Section-specific overrides — unique per-section feel
   ========================================================= */

/* FV: entrance after loader — top → bottom (elements drop into place) */
.fv .header,
.fv .fv__character,
.fv .fv__profile {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1),
              transform 1s cubic-bezier(.19,1,.22,1);
}
/* LINE CTA: keep its original translateX(-50%) centering while dropping in */
.fv .line-cta {
  opacity: 0;
  transform: translate(-50%, -30px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1),
              transform 1s cubic-bezier(.19,1,.22,1);
}
body.is-ready .fv .header       { opacity: 1; transform: none; transition-delay: .05s; }
body.is-ready .fv .fv__character{ opacity: 1; transform: none; transition-delay: .35s; }
body.is-ready .fv .line-cta     { opacity: 1; transform: translateX(-50%); transition-delay: .55s; }
body.is-ready .fv .fv__profile  { opacity: 1; transform: none; transition-delay: .70s; }

/* FV hero image (FVpc.png) — wrapped by JS in .fv__hero-imgwrap for sheen */
.fv__hero-imgwrap {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.fv .fv__hero-imgwrap {
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  transition: opacity 1s cubic-bezier(.19,1,.22,1) .2s,
              clip-path 1.3s cubic-bezier(.77,0,.18,1) .2s;
}
body.is-ready .fv .fv__hero-imgwrap {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Kira-n sheen — a diagonal light streak that sweeps after the reveal */
.fv__hero-imgwrap::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 40%;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.25) 40%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.25) 60%,
    rgba(255,255,255,0) 100%);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(2px);
}
body.is-ready .fv__hero-imgwrap::after {
  animation: fvSheen 1.4s cubic-bezier(.45,.05,.25,1) 1.35s 1 both;
}
@keyframes fvSheen {
  0%   { transform: translateX(0) skewX(-18deg);      opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translateX(480%) skewX(-18deg);   opacity: 0; }
}

/* Small sparkle that twinkles briefly at the peak of the sheen */
.fv__hero-imgwrap::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  top: 20%;
  left: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,0) 70%);
  box-shadow:
    0 0 12px rgba(255,255,255,.9),
    0 0 30px rgba(255,230,120,.8);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transform: scale(.2);
}
body.is-ready .fv__hero-imgwrap::before {
  animation: fvSparkle .8s cubic-bezier(.34,1.56,.64,1) 1.9s 1 both;
}
@keyframes fvSparkle {
  0%   { opacity: 0; transform: scale(.2) rotate(0); }
  40%  { opacity: 1; transform: scale(1.4) rotate(90deg); }
  70%  { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(.2) rotate(270deg); }
}

/* FV character: gentle float after entrance */
body.is-ready .fv .fv__character {
  animation: charFloat 5s ease-in-out 1.5s infinite alternate;
}
@keyframes charFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* -------- Floating LINE CTA (pinned to bottom after FV) -------- */
.line-cta--float {
  position: fixed !important;
  left: 50% !important;
  bottom: 20px;
  top: auto !important;
  width: min(calc(100% - 32px), 640px) !important;
  z-index: 80;
  transform: translate(-50%, 30px) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.19,1,.22,1),
              transform .55s cubic-bezier(.19,1,.22,1);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.22));
  animation: none !important;
}
.line-cta--float.is-show {
  opacity: 1;
  transform: translate(-50%, 0) !important;
  pointer-events: auto;
}
.line-cta--float:hover {
  transform: translate(-50%, -4px) !important;
}
.line-cta--float .line-cta__img {
  width: 100%;
  height: auto;
}

/* LINE CTA: continuous breathing pulse */
.fv .line-cta, .bridge__cta {
  transition: transform .4s ease;
}
body.is-ready .fv .line-cta {
  animation: ctaPulse 2.2s ease-in-out 1.2s infinite;
}
@keyframes ctaPulse {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(230,126,34,.25)); }
  50%      { filter: drop-shadow(0 10px 24px rgba(230,126,34,.55)); }
}

/* Message section — stripe-in underline for emphasis text */
.message .message__lead span {
  background-image: linear-gradient(180deg, transparent 20%, rgba(244,198,34,0) 20%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1s cubic-bezier(.77,0,.18,1) .3s,
              background-image .01s;
}
.message.is-in .message__lead span {
  background-image: linear-gradient(180deg, transparent 20%, #FFF100 20%);
  background-size: 100% 100%;
}

/* Member slider cards — add a subtle swing hover */
.staff-card { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.staff-card:hover { transform: translateY(-6px) rotate(-1deg); }

/* Company gallery images — tile reveal from bottom-right */
.company__gallery li {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.77,0,.18,1);
}
.company.is-in .company__gallery li { clip-path: inset(0 0 0 0); }
.company.is-in .company__gallery li:nth-child(1) { transition-delay: .1s; }
.company.is-in .company__gallery li:nth-child(2) { transition-delay: .2s; }
.company.is-in .company__gallery li:nth-child(3) { transition-delay: .3s; }
.company.is-in .company__gallery li:nth-child(4) { transition-delay: .4s; }
.company.is-in .company__gallery li:nth-child(5) { transition-delay: .5s; }
.company__gallery li img {
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
}
.company.is-in .company__gallery li img { transform: scale(1); }

/* Stats — subtle shimmer for the taiguu graphic */
.stats__taiguu {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity 1s cubic-bezier(.19,1,.22,1),
              transform 1s cubic-bezier(.19,1,.22,1);
}
.stats.is-in .stats__taiguu { opacity: 1; transform: none; }

/* Case cards — 3D flip-in stagger */
.case__cards li {
  opacity: 0;
  transform: perspective(900px) rotateY(-22deg) translateY(30px);
  transform-origin: left center;
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform 1s cubic-bezier(.19,1,.22,1);
}
.case.is-in .case__cards li { opacity: 1; transform: none; }
.case.is-in .case__cards li:nth-child(1) { transition-delay: .1s; }
.case.is-in .case__cards li:nth-child(2) { transition-delay: .25s; }
.case.is-in .case__cards li:nth-child(3) { transition-delay: .4s; }

/* FAQ — tile-pop with gentle rotation */
.faq__grid { perspective: 900px; }
.faq__item {
  opacity: 0;
  transform: translateY(40px) scale(.9) rotate(-3deg);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.34,1.56,.64,1);
}
.faq.is-in .faq__item { opacity: 1; transform: none; }
.faq.is-in .faq__item:nth-child(1) { transition-delay: .05s; }
.faq.is-in .faq__item:nth-child(2) { transition-delay: .15s; }
.faq.is-in .faq__item:nth-child(3) { transition-delay: .25s; }
.faq.is-in .faq__item:nth-child(4) { transition-delay: .35s; }
.faq.is-in .faq__item:nth-child(5) { transition-delay: .45s; }
.faq.is-in .faq__item:nth-child(6) { transition-delay: .55s; }
.faq__item { transition-property: opacity, transform; }
.faq__item:hover { transform: translateY(-4px); }

/* System table — rows slide in from left */
.system__row {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1),
              transform .8s cubic-bezier(.19,1,.22,1);
}
.system.is-in .system__row { opacity: 1; transform: none; }
.system.is-in .system__row:nth-child(1) { transition-delay: .1s; }
.system.is-in .system__row:nth-child(2) { transition-delay: .22s; }
.system.is-in .system__row:nth-child(3) { transition-delay: .34s; }
.system.is-in .system__row:nth-child(4) { transition-delay: .46s; }
.system.is-in .system__row:nth-child(5) { transition-delay: .58s; }

.system__video, .system__sports {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1) .3s,
              transform 1s cubic-bezier(.19,1,.22,1) .3s;
}
.system.is-in .system__video  { opacity: 1; transform: none; }
.system.is-in .system__sports { opacity: 1; transform: none; transition-delay: .5s; }

/* Bridge — character slide from right, text up */
.bridge__character {
  opacity: 0;
  transform: translateX(60px) rotate(4deg);
  transition: opacity 1s cubic-bezier(.19,1,.22,1),
              transform 1.1s cubic-bezier(.19,1,.22,1);
}
.bridge.is-in .bridge__character { opacity: 1; transform: none; }

.bridge__text > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1),
              transform .8s cubic-bezier(.19,1,.22,1);
}
.bridge.is-in .bridge__text > * { opacity: 1; transform: none; }
.bridge.is-in .bridge__text > *:nth-child(1) { transition-delay: .15s; }
.bridge.is-in .bridge__text > *:nth-child(2) { transition-delay: .28s; }
.bridge.is-in .bridge__text > *:nth-child(3) { transition-delay: .42s; }
.bridge.is-in .bridge__text > *:nth-child(4) { transition-delay: .55s; }
.bridge.is-in .bridge__text > *:nth-child(5) { transition-delay: .70s; }

/* Message — photo mask + text lines */
.message__photo {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.77,0,.18,1);
}
.message.is-in .message__photo { clip-path: inset(0 0 0 0); }
.message__photo img {
  transform: scale(1.12);
  transition: transform 1.3s cubic-bezier(.19,1,.22,1);
}
.message.is-in .message__photo img { transform: scale(1); }

.message__text > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1),
              transform .8s cubic-bezier(.19,1,.22,1);
}
.message.is-in .message__text > * { opacity: 1; transform: none; }
.message.is-in .message__text > *:nth-child(1) { transition-delay: .2s; }
.message.is-in .message__text > *:nth-child(2) { transition-delay: .35s; }
.message.is-in .message__text > *:nth-child(3) { transition-delay: .5s; }
.message.is-in .message__text > *:nth-child(4) { transition-delay: .65s; }
.message.is-in .message__text > *:nth-child(5) { transition-delay: .8s; }

/* Member — heading + bubble pop, track slide */
.member__title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform .9s cubic-bezier(.19,1,.22,1);
}
.member.is-in .member__title { opacity: 1; transform: none; }
.member__bubble {
  opacity: 0;
  transform: scale(.7) rotate(-8deg);
  transition: opacity .7s ease .3s,
              transform .7s cubic-bezier(.34,1.56,.64,1) .3s;
}
.member.is-in .member__bubble { opacity: 1; transform: none; }
.staff-slider {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1) .4s,
              transform 1s cubic-bezier(.19,1,.22,1) .4s;
}
.member.is-in .staff-slider { opacity: 1; transform: none; }

/* Company — logo pop + text lines */
.company__logo {
  opacity: 0;
  transform: scale(.8) rotate(-4deg);
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform .9s cubic-bezier(.34,1.56,.64,1);
}
.company.is-in .company__logo { opacity: 1; transform: none; }
.company__logo img {
  animation: logoBreath 4s ease-in-out infinite alternate;
}
@keyframes logoBreath {
  from { transform: scale(1) rotate(0); }
  to   { transform: scale(1.03) rotate(-1.5deg); }
}

.company__text > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1),
              transform .8s cubic-bezier(.19,1,.22,1);
}
.company.is-in .company__text > * { opacity: 1; transform: none; }
.company.is-in .company__text > *:nth-child(1) { transition-delay: .15s; }
.company.is-in .company__text > *:nth-child(2) { transition-delay: .25s; }
.company.is-in .company__text > *:nth-child(3) { transition-delay: .35s; }
.company.is-in .company__text > *:nth-child(4) { transition-delay: .45s; }
.company.is-in .company__text > *:nth-child(5) { transition-delay: .55s; }

/* Section titles: underline sweep */
.company__heading, .stats__heading, .system__heading {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform .9s cubic-bezier(.19,1,.22,1);
}
.company.is-in .company__heading,
.stats.is-in .stats__heading,
.system.is-in .system__heading { opacity: 1; transform: none; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .loader { display: none !important; }
  body.is-loading { overflow: auto; height: auto; }
}