/* ---------- motion layer ---------- */
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sky), var(--lime)); z-index: 100; }
[data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 80ms); will-change: transform, opacity; }
[data-reveal="up"] { transform: translateY(46px); }
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="zoom"] { transform: scale(.9); }
[data-reveal="clip"] { opacity: 1; clip-path: inset(18% 18% 18% 18% round 28px); transform: scale(1.04); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0 round 28px); }
.hero .slides { will-change: transform; }
.hero .wrap { will-change: transform, opacity; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: inline-block; transform: translateY(105%); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .12s; } .hero h1 .ln:nth-child(3) > span { animation-delay: .24s; }
.hero .motto, .hero .intro, .hero .btn-row, .hero .dots { opacity: 0; animation: fadeup .8s ease forwards .45s; }
.hero .intro { animation-delay: .55s; } .hero .btn-row { animation-delay: .65s; } .hero .dots { animation-delay: .75s; }
@keyframes rise { to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.scroll-hint { position: absolute; left: 50%; bottom: 76px; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #DCE8F3; font-size: 13px; }
.scroll-hint i { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; position: relative; }
.scroll-hint i::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--lime); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* marquee */
.marquee { background: var(--lime); color: var(--navy); overflow: hidden; padding: 18px 0; transform: rotate(-1.2deg); margin: 70px -20px 10px; box-shadow: 0 10px 30px -18px rgba(6,44,82,.5); }
.marquee .row { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marquee:hover .row { animation-play-state: paused; }
.marquee span { font-family: var(--head); font-size: clamp(22px, 3vw, 34px); font-weight: 600; padding: 0 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.marquee span::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); }
.marquee.alt { background: var(--navy); color: #fff; transform: rotate(1.2deg); margin-top: -8px; }
.marquee.alt .row { animation-direction: reverse; animation-duration: 44s; }
.marquee.alt span::after { background: var(--orange); }
@keyframes marq { to { transform: translateX(-50%); } }

/* horizontal journey */
.journey { position: relative; background: var(--navy); }
.journey .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.journey .intro { padding: 0 24px; max-width: var(--wrap); margin: 0 auto 36px; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.journey .intro h2 { color: #fff; }
.journey .intro p { color: #C3D6EA; }
.journey .bar { width: 220px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.journey .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--lime); }
.journey .track { display: flex; gap: 28px; padding: 0 max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); will-change: transform; }
.jcard { flex: 0 0 min(460px, 78vw); height: min(58vh, 480px); border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--blue-d); }
.jcard img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.2s; }
.jcard.act img { transform: scale(1); }
.jcard .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,44,82,0) 30%, rgba(6,44,82,.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; }
.jcard b { font-family: var(--head); font-size: 90px; line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--lime); position: absolute; top: 22px; right: 26px; }
.jcard h3 { color: #fff; font-size: 30px; }
.jcard p { color: #DCE8F3; margin-top: 8px; }

/* word fill statement */
.statement { padding: 140px 0; }
.statement p.big { font-family: var(--head); font-size: clamp(30px, 4.6vw, 64px); line-height: 1.18; font-weight: 600; color: var(--navy); max-width: 22ch; }
.statement .w { opacity: .14; transition: opacity .25s linear; }
.statement .w.on { opacity: 1; }
.statement .by { margin-top: 30px; font-weight: 700; color: var(--orange-d); }

/* sticky story */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.story .visual { position: sticky; top: 110px; height: calc(100vh - 150px); max-height: 640px; border-radius: var(--r-lg); overflow: hidden; }
.story .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s, transform 1.4s; }
.story .visual img.on { opacity: 1; transform: none; }
.story .visual .count { position: absolute; left: 24px; bottom: 24px; background: rgba(6,44,82,.8); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.story .steps-v { display: flex; flex-direction: column; }
.story .st { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: .25; transition: opacity .5s; }
.story .st.on { opacity: 1; }
.story .st h3 { font-size: clamp(28px, 3vw, 40px); color: #fff; }
.story .st p { font-size: 19px; }

/* tilt + magnetic */
.tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s; }
.magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s; }
.phero .ring { transition: transform .1s linear; }
.float-y { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-10px); } }

@media (max-width: 860px) {
  .journey .pin { position: static; height: auto; padding: 64px 0; }
  .journey { height: auto !important; }
  .journey .track { flex-direction: column; transform: none !important; padding: 0 24px; }
  .jcard { flex: none; width: 100%; height: 340px; }
  .journey .bar { display: none; }
  .story { grid-template-columns: 1fr; }
  .story .visual { position: relative; top: 0; height: 280px; }
  .story .st { min-height: auto; opacity: 1; padding: 22px 0; }
  .statement { padding: 80px 0; }
  .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero h1 .ln > span, .hero .motto, .hero .intro, .hero .btn-row, .hero .dots { opacity: 1 !important; transform: none !important; }
  .marquee .row { animation: none !important; }
  .statement .w { opacity: 1; }
  .journey .pin { position: static; height: auto; padding: 64px 0; }
  .journey { height: auto !important; }
  .journey .track { flex-wrap: wrap; transform: none !important; }
}
html, body { overflow-x: clip; }
main { overflow-x: clip; }
.scroll-hint { left: auto; right: 32px; bottom: 90px; transform: none; }