/* Masterful hero: the live coast. Loaded after site.css. */
/* hero: the live coast, edge to edge. The copy only ever sits on calm ground: open sky on wide screens, the beach on tall ones. */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1080px;margin-top:-73px;overflow:hidden;background:#E3E2DD;color:var(--hx);touch-action:pan-y;user-select:none;-webkit-user-select:none;isolation:isolate;container:scene/size;
--hb:#0B0B0B;--hb-fg:#FAFAF9;--hb-ic:#CDEDFC;--hb-hi:#262624;--hg:#FFFFFF;--hg-fg:#0B0B0B;--hg-ring:rgba(11,11,11,.1)}
.scene-dark .hero{--hb:#CDEDFC;--hb-fg:#0B0B0B;--hb-ic:#0B0B0B;--hb-hi:#E1F4FD;--hg:rgba(250,250,249,.06);--hg-fg:#FAFAF9;--hg-ring:rgba(250,250,249,.55)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
[dir=rtl] .hero canvas{transform:scaleX(-1)}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grain,none) 0 0/240px 240px;opacity:.1;mix-blend-mode:overlay}
.hero.drag,.hero.drag *{cursor:grabbing!important}
.hero-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-ui a,.hero-ui button{pointer-events:auto}
.hero-copy{padding-top:calc(73px + clamp(36px,9vh,120px))}
.hero h1{margin:0;font:800 clamp(60px,min(8.8vw,14.5vh),164px)/.84 var(--disp);font-stretch:88%;letter-spacing:-.052em;color:var(--hx);transition:color .6s}
.hero .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero .ln>span{display:inline-block}
[dir=rtl] .hero h1{font-weight:700;line-height:1.22;font-size:clamp(48px,7vw,120px)}
[lang=fr] .hero h1{font-size:clamp(50px,7vw,128px)}
.hero-copy p{margin:clamp(18px,2.6vh,30px) 0 0;max-width:34ch;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--hx2);text-wrap:pretty;transition:color .6s}
[dir=rtl] .hero-copy p{line-height:1.85}
.hero-copy .ctas{margin-top:clamp(22px,3.4vh,36px);width:fit-content}
/* the buttons stand in the same light as the scene: they cast the sun's shadow by day and glow like the windows at night */
.hero .bub,.hero .ghost{transition:transform .35s var(--spring),background-color .5s,color .5s,box-shadow .5s}
.hero .bub{background:var(--hb);color:var(--hb-fg);box-shadow:var(--shx,0px) var(--shy,8px) var(--shb,20px) -8px rgba(11,11,11,var(--sha,.3))}
.hero .bub:hover{background:var(--hb-hi)}
.hero .bub .wa,.hero .bub .ticks{color:var(--hb-ic);opacity:1}
.hero .ghost{border:0;background:var(--hg);color:var(--hg-fg);box-shadow:inset 0 0 0 1.5px var(--hg-ring),var(--shx,0px) var(--shy,8px) var(--shb,20px) -8px rgba(11,11,11,var(--sha,.3))}
.hero .ghost:hover{background:#0B0B0B;color:#FAFAF9}
.scene-dark .hero .bub{box-shadow:0 0 0 1px rgba(205,237,252,.35),0 14px 44px -12px rgba(205,237,252,.7)}
.scene-dark .hero .ghost{box-shadow:inset 0 0 0 1.5px var(--hg-ring)}
.scene-dark .hero .ghost:hover{background:#FAFAF9;color:#0B0B0B}
.sun{position:absolute;left:0;top:0;z-index:3;width:calc(var(--sr,52px)*2.6);height:calc(var(--sr,52px)*2.6);margin:calc(var(--sr,52px)*-1.3) 0 0 calc(var(--sr,52px)*-1.3);border-radius:50%;cursor:grab;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.sun:focus-visible{box-shadow:0 0 0 3px var(--hx)}
.sun-tag{position:absolute;left:50%;top:calc(100% + 2px);padding:5px 11px;border-radius:999px;background:#0B0B0B;color:#FAFAF9;font:500 13px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transform:translate(-50%,8px);transition:opacity .25s,transform .4s var(--spring);pointer-events:none}
.sun-tag.coach{font:600 13.5px var(--sans);background:#CDEDFC;color:#0B0B0B;box-shadow:0 10px 24px -14px rgba(11,11,11,.5)}
.hero.drag .sun-tag,.sun:hover .sun-tag,.sun:focus-visible .sun-tag,.sun-tag.on{opacity:1;transform:translate(-50%,0)}
.sun-tag.coach.on{animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translate(-50%,-4px)}}
.scene-dark .sun-tag:not(.coach){background:#FAFAF9;color:#0B0B0B}
/* time of day: the scene rests at golden hour; a small two-icon switch flips it to now. On wide screens it sits on the sand, in the bottom corner under the village (the sand is the bottom 10 to 13.5% of the scene). */
.scene-cap{position:absolute;inset-inline-end:var(--pad);inset-inline-start:auto;bottom:max(12px,calc(5cqh - 20px));z-index:3;display:flex}
.tod{position:relative;display:inline-flex;align-items:center;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--hx-inv) 60%,transparent);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx) 13%,transparent),0 14px 30px -20px rgba(11,11,11,.55);transition:background-color .6s}
.tod .th{position:absolute;left:0;top:3px;bottom:3px;width:var(--tw,0px);border-radius:999px;background:var(--hx);transform:translateX(var(--tx,3px));transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s,background-color .6s}
.scene-cap:not([data-m=gold]):not([data-m=now]) .th{opacity:0}
.tod button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:0;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:none;color:var(--hx);cursor:pointer;font:600 14.5px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .35s,background-color .2s}
.tod button[aria-pressed=true]{color:var(--hx-inv);cursor:default}
.tod button:not([aria-pressed=true]):hover{background:var(--hx-hover)}
.tod button:focus-visible{outline-offset:2px;border-radius:999px}
.tod svg{width:18px;height:18px;flex:none}
.tod button>span{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;background:var(--hx);color:var(--hx-inv);font:600 12.5px var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
@media (hover:hover){.tod button:hover>span{opacity:1}}
.tod button:focus-visible>span{opacity:1}
.tod .dot{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}
.tod .dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;opacity:0}
.scene-cap[data-m=now] .dot::after{animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}
/* where nothing can be hovered, the chosen icon says what it is: the pressed side opens into a label, the other stays an icon */
@media (hover:none){
.tod .th{display:none}
.tod button[aria-pressed=true]{width:auto;gap:7px;padding-inline:9px 13px;background:var(--hx)}
.tod button[aria-pressed=true]>span{position:static;transform:none;padding:0;background:none;color:inherit;font-size:13.5px;opacity:1;animation:todin .4s var(--ease) both}
}
@keyframes todin{from{opacity:0}}
.hero-end{position:absolute;left:0;bottom:73px;width:1px;height:1px;pointer-events:none}
/* tall screens: the scene fills the top, everything you act on sits on the beach, in thumb reach */
@container scene (aspect-ratio < 21/20){
.hero-ui{inset:auto 0 0 0;display:flex;flex-direction:column;padding-top:18px;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
.hero-copy{padding-top:0}
.hero h1{font-size:clamp(40px,12.6cqw,84px)}
[lang=fr] .hero h1{font-size:clamp(36px,10.8cqw,74px)}
[dir=rtl] .hero h1{font-size:clamp(36px,11cqw,72px)}
.hero-copy p{margin-top:12px;max-width:36ch;font-size:clamp(15.5px,4cqw,19px);line-height:1.48}
.hero-copy .ctas{width:auto;max-width:460px;margin-top:20px;flex-direction:column;align-items:stretch;gap:2px}
.hero .bub{justify-content:center;height:58px;font-size:16.5px;white-space:nowrap}
.hero .bub .ticks{display:none}
.hero .ghost{display:none}
.scene-cap{order:-1;position:static;align-self:flex-start;margin-bottom:14px}
.tod .th{display:none}
.tod button[aria-pressed=true]{width:auto;gap:7px;padding-inline:9px 13px;background:var(--hx)}
.tod button[aria-pressed=true]>span{position:static;transform:none;padding:0;background:none;color:inherit;font-size:13.5px;opacity:1;animation:todin .4s var(--ease) both}
}
@container scene (aspect-ratio < 21/20) and (height < 700px){
.hero-ui{padding-top:14px}
.hero h1{font-size:clamp(36px,11cqw,64px)}
.hero-copy p{margin-top:8px;font-size:14.5px}
.hero-copy .ctas{margin-top:14px}
.hero .bub{height:54px}
.scene-cap{margin-bottom:10px}
}
/* wide screens: the scene fills the whole visible screen, at any size; the big swashes spill into the next section as you scroll */
@media (min-aspect-ratio:21/20){.hero{height:100vh;height:100svh;max-height:none}}
.spill{position:relative;z-index:5;height:0;pointer-events:none}
.spill canvas{position:absolute;left:0;top:0;width:100%;height:150px;display:block}
[dir=rtl] .spill canvas{transform:scaleX(-1)}
@media (max-width:699px){.hero .bub:not(.sm){white-space:nowrap;line-height:1}}
@media (prefers-reduced-motion:no-preference){
.hero .ln>span{animation:swell 1.15s var(--ease) both}
.hero .ln:nth-child(2)>span{animation-delay:.1s}
.hero-copy p,.hero-copy .ctas{animation:fadeup .9s var(--ease) .35s both}
.scene-cap{animation:fadeup .9s var(--ease) 1.2s both}
}