/* Motion layer. Everything here is decoration: the page is complete without
   it, and all of it switches off under prefers-reduced-motion. Scroll reveals
   only hide content once motion.js has added `.motion` to <html>, so a failed
   script can never leave a section invisible. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- hero entrance (pure CSS, runs without JS) ------------------------ */
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: none; } }

  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero__cta,
  .awards { animation: rise .8s var(--ease-out) both; }
  .hero h1 { animation-delay: .08s; }
  .hero .lead { animation-delay: .18s; }
  .hero__cta { animation-delay: .28s; }
  .awards { animation-delay: .36s; }
  .award { animation: rise .6s var(--ease-out) both; }
  .award:nth-child(1) { animation-delay: .5s; }
  .award:nth-child(2) { animation-delay: .6s; }
  .award:nth-child(3) { animation-delay: .7s; }
  .years i { animation: pop-in .45s var(--ease-spring) both; }
  .years i:nth-child(1) { animation-delay: .85s; }
  .years i:nth-child(2) { animation-delay: .95s; }
  .years i:nth-child(3) { animation-delay: 1.05s; }
  @keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

  /* gold sheen sweeps the awards card and the #1 medal now and then */
  .awards { overflow: hidden; }
  .awards::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(246, 210, 122, .16) 50%, transparent 65%);
    transform: translateX(-110%); animation: sheen 6s ease-in-out 1.6s infinite;
  }
  @keyframes sheen { 0% { transform: translateX(-110%); } 30%, 100% { transform: translateX(110%); } }
  .award--top .award__ic { animation: glint 6s ease-in-out 1.9s infinite; }
  @keyframes glint { 0%, 26%, 100% { box-shadow: 0 0 0 0 rgba(246, 210, 122, 0); } 12% { box-shadow: 0 0 18px 2px rgba(246, 210, 122, .55); } }

  .hero__badge { animation: badge-in .9s var(--ease-spring) 1s both, float 5s ease-in-out 2s infinite; }
  @keyframes badge-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes float { 50% { transform: translateY(-6px); } }
  .hero__media { animation: settle 1.1s var(--ease-out) .2s both; }

  /* red words wipe in from a soft underline */
  .hero h1 em {
    background: linear-gradient(transparent 88%, rgba(255, 59, 82, .35) 88%) no-repeat 0 0 / 0% 100%;
    animation: underline 1s var(--ease-out) .9s forwards;
  }
  @keyframes underline { to { background-size: 100% 100%; } }

  /* ambient glow drifts slowly */
  .glow { animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-4%, 3%, 0) scale(1.08); }
  }

  /* live dot */
  .dot { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 18, 46, .55); }
    70% { box-shadow: 0 0 0 9px rgba(229, 18, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 18, 46, 0); }
  }

  /* ---- nav gains depth once scrolled ------------------------------------ */
  .nav { transition: box-shadow .3s, background-color .3s; }
  .nav.scrolled { box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .9); background: rgba(14, 10, 11, .94); }

  /* ---- scroll reveal ------------------------------------------------------ */
  .motion [data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .3s, box-shadow .35s;
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .motion [data-reveal].in { opacity: 1; transform: none; }

  /* ---- buttons ------------------------------------------------------------- */
  .btn { transition: transform .2s var(--ease-out), background-color .2s, box-shadow .25s, border-color .2s; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn--red { position: relative; overflow: hidden; }
  .btn--red:hover { box-shadow: 0 16px 36px -12px rgba(229, 18, 46, .85); }
  .btn--red::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .btn--red:hover::after { transform: translateX(120%); transition: transform .8s var(--ease-out); }
  .btn--lg.btn--red { animation: breathe 3.2s ease-in-out 1.6s infinite; }
  @keyframes breathe {
    0%, 100% { box-shadow: 0 10px 30px -10px rgba(229, 18, 46, .7); }
    50% { box-shadow: 0 14px 40px -8px rgba(229, 18, 46, .95); }
  }

  /* ---- cards lift on hover ------------------------------------------------- */
  .panel, .steps li, .eco__item, .tool, .tl, .story, .fit__col, .vs__col {
    transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s, opacity .7s var(--ease-out);
  }
  @media (hover: hover) {
    .panel:hover, .steps li:hover, .eco__item:hover, .tool:hover, .tl:hover, .story:hover {
      transform: translateY(-4px);
      border-color: rgba(229, 18, 46, .45);
      box-shadow: 0 22px 44px -26px rgba(229, 18, 46, .55);
    }
    .motion [data-reveal].in:hover { transform: translateY(-4px); }
    .eco__item:hover .ic { animation: hop .6s var(--ease-spring); }
    .tool:hover::after { width: 100%; }
    .story:hover img { transform: scale(1.04); }
  }
  .ic { display: inline-block; }
  @keyframes hop { 40% { transform: translateY(-6px) rotate(-6deg); } 100% { transform: none; } }
  .tool::after { transition: width .5s var(--ease-out); }
  .story img { transition: transform .8s var(--ease-out); }

  /* step numbers light up in sequence once revealed */
  .motion .steps li b { transition: color .4s, letter-spacing .6s var(--ease-out); letter-spacing: .02em; }
  .motion .steps li.in b { letter-spacing: .08em; }

  /* ticks and chips pop in after their card */
  .motion [data-reveal] .ticks li,
  .motion [data-reveal] .chips span {
    opacity: 0; transform: translateX(-8px);
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  }
  .motion [data-reveal].in .ticks li,
  .motion [data-reveal].in .chips span { opacity: 1; transform: none; }
  .motion [data-reveal].in :is(.ticks li, .chips span):nth-child(1) { transition-delay: .25s; }
  .motion [data-reveal].in :is(.ticks li, .chips span):nth-child(2) { transition-delay: .33s; }
  .motion [data-reveal].in :is(.ticks li, .chips span):nth-child(3) { transition-delay: .41s; }
  .motion [data-reveal].in :is(.ticks li, .chips span):nth-child(4) { transition-delay: .49s; }

  /* "Hari ini" column: a slow sheen so the contrast with "Dulu" reads */
  .vs__col--new { position: relative; overflow: hidden; }
  .vs__col--new::before {
    content: ''; position: absolute; inset: -50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 80%, rgba(255, 59, 82, .18) 90%, transparent 100%);
    animation: spin 9s linear infinite;
  }
  .vs__col--new > * { position: relative; }
  @keyframes spin { to { transform: rotate(1turn); } }

  /* timeline: the week badge fills in */
  .motion .tl__w { transition: transform .5s var(--ease-spring) .2s; transform: scale(.6); }
  .motion .tl.in .tl__w { transform: none; }

  /* ---- FAQ ------------------------------------------------------------------ */
  .faq summary { transition: color .2s; }
  .faq summary:hover { color: var(--red-2); }
  .faq details[open] p { animation: rise .45s var(--ease-out) both; }
  .faq summary::after { transition: transform .35s var(--ease-spring); }

  /* ---- form ---------------------------------------------------------------- */
  .opt { transition: border-color .2s, background-color .2s, transform .2s var(--ease-out); }
  .opt:hover { border-color: rgba(229, 18, 46, .5); }
  .opt:has(input:checked) { animation: pop .35s var(--ease-spring); }
  @keyframes pop { 50% { transform: scale(1.02); } }
  input[type=text], input[type=tel], select, textarea { transition: border-color .2s, box-shadow .25s; }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 5px rgba(229, 18, 46, .14); }
  .form-err:not(:empty) { animation: shake .4s ease; }
  @keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

  .apply { transition: box-shadow .6s; }
  .motion .apply[data-reveal].in { box-shadow: 0 40px 110px -36px rgba(229, 18, 46, .6); }

  /* success: check draws itself, then the next steps rise in */
  #apply-done:not([hidden]) > * { animation: rise .6s var(--ease-out) both; }
  #apply-done:not([hidden]) > :nth-child(2) { animation-delay: .35s; }
  #apply-done:not([hidden]) > :nth-child(3) { animation-delay: .42s; }
  #apply-done:not([hidden]) > :nth-child(4) { animation-delay: .5s; }
  #apply-done:not([hidden]) .next__step { animation: rise .6s var(--ease-out) both; }
  #apply-done:not([hidden]) .next__step:nth-child(1) { animation-delay: .6s; }
  #apply-done:not([hidden]) .next__step:nth-child(2) { animation-delay: .72s; }
  #apply-done:not([hidden]) .done-check circle { animation: draw .7s var(--ease-out) .05s both; }
  #apply-done:not([hidden]) .done-check path { animation: draw .45s var(--ease-out) .5s both; }
  @keyframes draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

  /* submit spinner */
  .btn.is-loading::before {
    content: ''; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    animation: spin .7s linear infinite;
  }

  /* ---- sticky CTA ------------------------------------------------------------- */
  .sticky-bar { transition: transform .45s var(--ease-spring), visibility 0s linear .45s; }
  .sticky-bar.show { transition: transform .45s var(--ease-spring), visibility 0s; }
}

/* static styles the animations rely on (always present) */
.done-check { width: 56px; height: 56px; margin-bottom: 14px; display: block; }
.done-check circle { fill: rgba(31, 170, 83, .12); stroke: #1faa53; stroke-width: 2.5; stroke-dasharray: 160; }
.done-check path { fill: none; stroke: #3ddc84; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; }

/* ---- gallery: slow endless drift (pauses on hover/touch/focus) ----------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .trips { overflow: hidden; scroll-snap-type: none; }
  .motion .trip[aria-hidden="true"] { display: block; }
  .motion .trips__track { padding-inline: 0; animation: marquee 48s linear infinite; }
  .motion .trips:hover .trips__track,
  .motion .trips:focus-within .trips__track,
  .motion .trips.is-held .trips__track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
  .trip img { transition: transform .8s var(--ease-out); }
  @media (hover: hover) { .trip:hover img { transform: scale(1.05); } }

  .wifi__ic path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .motion .wifi.in .wifi__ic path { animation: signal .5s var(--ease-out) forwards; }
  .motion .wifi.in .wifi__ic path:nth-child(3) { animation-delay: .1s; }
  .motion .wifi.in .wifi__ic path:nth-child(2) { animation-delay: .25s; }
  .motion .wifi.in .wifi__ic path:nth-child(1) { animation-delay: .4s; }
  @keyframes signal { to { stroke-dashoffset: 0; } }
}

@media (prefers-reduced-motion: no-preference) {
  .soc { transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s, opacity .7s var(--ease-out); }
  .soc__go { transition: transform .35s var(--ease-spring), background-color .25s, color .25s, border-color .25s; }
  .soc__avatar img { transition: transform .5s var(--ease-spring); }
  @media (hover: hover) {
    .soc:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .9); }
    .motion .soc[data-reveal].in:hover { transform: translateY(-3px); }
    .soc:hover .soc__go { transform: translate(2px, -2px) rotate(8deg); background: var(--ink); color: var(--bg); border-color: var(--ink); }
    .soc:hover .soc__avatar img { transform: scale(1.06); }
    .soc--tt:hover .soc__avatar--duo img + img { transform: translateX(6px) scale(1.06); }
  }
  .tt-embed__ic svg { animation: tt-glitch 3s ease-in-out infinite; }
  @keyframes tt-glitch {
    0%, 86%, 100% { filter: none; transform: none; }
    90% { filter: drop-shadow(-2px 0 #25f4ee) drop-shadow(2px 0 #fe2c55); transform: translateX(1px); }
    94% { filter: drop-shadow(2px 0 #25f4ee) drop-shadow(-2px 0 #fe2c55); transform: translateX(-1px); }
  }
}