/* Prova S1 v6: hero + journey (full-bleed cinematic steps, live heat shimmer). Loads after s1-v6.css. */

/* ---------- HERO ---------- */
.hy{position:relative;height:calc(100svh - var(--gnav-h,44px) - var(--lnav-h,52px));min-height:620px;max-height:1080px;overflow:hidden;background:#000;isolation:isolate}
.hy-copy{position:relative;z-index:3;text-align:center;padding:clamp(36px,7.4vh,92px) 24px 0}
.hy-h{margin:0;display:flex;flex-direction:column;align-items:center}
.hy-name{font-size:clamp(20px,1.9vw,28px);line-height:1.1;font-weight:600;letter-spacing:.004em;color:#f5f5f7}
.hy-tag{margin-top:clamp(8px,1.1vh,14px);font-size:clamp(48px,6.8vw,104px);line-height:1.02;letter-spacing:-.026em;font-weight:500;text-wrap:balance;
  background:linear-gradient(100deg,#e4ddff 0%,#b3a4ff 34%,#8a86ff 62%,#6fa6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hy-shot{position:absolute;z-index:1;left:50%;bottom:0;width:var(--hy-w);transform:translateX(-50%);pointer-events:none}
.hy-shot picture,.hy-shot img{display:block;width:100%;height:auto}
.hy-led{position:absolute;inset:0;mix-blend-mode:screen;opacity:0}
.hy-led img{display:block;width:100%;height:auto}
.hy{--hy-w:min(1500px,max(1000px,calc((100svh - var(--gnav-h,44px) - var(--lnav-h,52px)) * 1.62)))}
.hy::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:min(16vh,140px);background:linear-gradient(rgba(0,0,0,0),#000 90%);pointer-events:none}
@media (max-width:734px){
  .hy{min-height:560px;--hy-w:128vw}
  .hy-shot{bottom:16%}
  .hy-copy{padding-top:40px}
  .hy-tag{font-size:clamp(40px,11.6vw,52px);max-width:9em}
}
@media (prefers-reduced-motion:no-preference){
  .hy-copy{animation:hy-up 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hy-shot{animation:hy-in 1.6s cubic-bezier(.2,.7,.2,1) .15s both}
  .hy-led{animation:hy-led 2.2s cubic-bezier(.3,.1,.2,1) 1.1s both}
  @keyframes hy-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes hy-in{from{opacity:0;transform:translate(-50%,24px) scale(.985)}to{opacity:1;transform:translate(-50%,0)}}
  @keyframes hy-led{0%{opacity:0}55%{opacity:1}72%{opacity:.82}100%{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.hy-led{opacity:1}}

/* ---------- JOURNEY ---------- */
.jy{position:relative;background:#000}
.jy-intro{width:min(980px,calc(100% - 48px));margin:0 auto;text-align:center;padding:clamp(110px,15vh,190px) 0 clamp(48px,7vh,80px)}
.jy-h{margin:0;font-size:clamp(40px,5.2vw,80px);line-height:1.03;letter-spacing:-.022em;font-weight:500;color:#f5f5f7;text-wrap:balance}
.jy-h span{color:#86868b}
.jy-lead{margin:22px auto 0;max-width:34em;font-size:clamp(19px,1.55vw,24px);line-height:1.38;color:#a1a1a6;text-wrap:pretty}
.jy-track{position:relative;height:540svh}
.jy-pin{position:sticky;top:var(--lnav-h,52px);height:calc(100svh - var(--lnav-h,52px));overflow:hidden;background:#000}
.jy-shots{position:absolute;inset:0;
  /* no crop lines: every edge of the visual feathers into the black page (wider at top and bottom) */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 76%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 76%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-composite:intersect}
.jy-shot{position:absolute;inset:0;opacity:0;transition:opacity 1s cubic-bezier(.3,.6,.2,1)}
.jy-shot img{width:100%;height:100%;object-fit:cover;object-position:var(--op,58% 50%);display:block;transform:scale(1.045);transition:transform 2.6s cubic-bezier(.2,.6,.2,1)}
.jy-shot.on{opacity:1}
.jy-shot.on img{transform:scale(1)}
.jy-shot[data-i="0"]{--op:56% 40%}
.jy-shot[data-i="1"]{--op:48% 38%}
.jy-shot[data-i="2"]{--op:60% 40%}
.jy-shot[data-i="3"]{--op:52% 55%}
.jy-shot[data-i="4"]{--op:46% 50%}
.jy-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 52%,rgba(0,0,0,.72) 78%,#000 100%),
             linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%)}
.jy-copy{position:absolute;left:max(24px,calc((100% - 1180px) / 2));bottom:clamp(150px,21vh,200px);width:min(500px,calc(100% - 48px));z-index:2}
.jy-steps{list-style:none;margin:0;padding:0;position:relative;min-height:10.5em}
.jy-step{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.jy-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.jy-k{margin:0 0 12px;display:flex;gap:10px;font-size:14px;font-weight:600;letter-spacing:.01em;color:#a1a1a6}
.jy-k .num{color:#6e6e73;font-weight:500}
.jy-step h3{margin:0;font-size:clamp(28px,2.6vw,40px);line-height:1.08;letter-spacing:-.014em;font-weight:500;color:#f5f5f7;text-wrap:balance}
.jy-read{margin:16px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.jy-read b{font-size:clamp(26px,2.2vw,34px);font-weight:500;letter-spacing:-.01em;color:#f5f5f7}
.jy-read span{font-size:15px;color:#a1a1a6}
/* trace */
.jy-trace{position:absolute;z-index:2;left:max(24px,calc((100% - 1180px) / 2));right:max(24px,calc((100% - 1180px) / 2));bottom:clamp(22px,3.6vh,36px);margin:0}
.jy-trace svg{display:block;width:100%;height:clamp(48px,7vh,72px);overflow:visible}
.jy-grid path{stroke:rgba(255,255,255,.08);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.jy-grid .sep{stroke:rgba(255,255,255,.16);stroke-dasharray:2 4}
.jy-line-all{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jy-line{fill:none;stroke:#f5f5f7;stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jy-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(160,148,255,.9))}
.jy-ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);font-size:12px;color:#6e6e73}
.jy-ticks li{padding-left:2px;transition:color .4s}
.jy-ticks li.on{color:#f5f5f7}
.jy-now{position:absolute;right:0;top:-28px;display:flex;gap:10px;align-items:baseline;font-size:13px;color:#a1a1a6}
.jy-now b{font-size:15px;font-weight:600;color:#f5f5f7}
@media (max-width:734px){
  .jy-track{height:520svh}
  .jy-shots{bottom:auto;height:58%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
  .jy-shot img{object-position:var(--opm,var(--op))}
  .jy-scrim{bottom:auto;height:58%;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,#000 100%)}
  .jy-copy{left:24px;right:24px;width:auto;top:calc(58% - 28px);bottom:auto}
  .jy-steps{min-height:9.5em}
  .jy-step{top:0;bottom:auto}
  .jy-step h3{font-size:26px}
  .jy-read b{font-size:24px}
  .jy-trace{left:24px;right:24px;bottom:calc(86px + env(safe-area-inset-bottom))}
  .jy-trace svg{height:46px}
  .jy-ticks{font-size:10px}
  .jy-now{top:-24px}
}
@media (max-height:700px) and (min-width:735px){.jy-copy{bottom:130px}.jy-step h3{font-size:28px}}
@media (prefers-reduced-motion:reduce){.jy-shot,.jy-step,.jy-shot img{transition:none}.jy-shot img{transform:none}}

/* v12: the phone mask has two layers that were adding (union), so only the corners faded; intersect them so the top,
   bottom and side fades all apply as intended */
@media (max-width:734px){.jy-shots{-webkit-mask-composite:source-in;mask-composite:intersect}}