/* Homepage "Pick your kind of day" gallery, Lean version (2026-10-30).
   Cover Flow that drifts in a loop, leans into swipes, tilts toward the cursor.
   Behaviour: assets/js/home-gallery.js. Without JS the five tiles show as a scroll row. */

.hg{padding-bottom:clamp(36px,5vw,64px)}
.hg__ttl{text-align:center}
html .hg__ttl h2.hg__line{font:400 clamp(15px,1.6vw,17px)/1.4 var(--sans);letter-spacing:0;color:var(--muted);margin:0;max-width:none;text-transform:none}
.hg__word{position:relative;display:block;height:1.3em;overflow:hidden;font-family:var(--display);font-weight:800;font-size:clamp(52px,9.5vw,118px);line-height:1.04;letter-spacing:-.055em;margin-top:2px}
.hg__word .w{position:absolute;left:0;right:0;top:.06em;display:flex;justify-content:center;white-space:nowrap}
/* each letter gets extra room on every side so the gradient never trims its edges or the tail of g, p and y */
.hg__word .w i{font-style:normal;display:inline-block;padding:.04em .1em .2em;margin:-.04em -.1em -.2em;background:linear-gradient(100deg,#FF7A3D 0%,#FF3D8B 32%,#9B5CFF 66%,#3D9BFF 100%);background-size:var(--bw,600px) 100%;background-position:calc(var(--bx,0px) * -1) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s,filter .6s}
.hg__word .w.enter i{transform:translate3d(0,110%,0);opacity:0;filter:blur(6px)}
.hg__word .w.leave i{transform:translate3d(0,-110%,0);opacity:0;filter:blur(6px)}

.hg__stage{position:relative;--cw:260px;width:100%;max-width:none;height:calc(var(--cw) * 1.5 + 90px);margin-top:clamp(14px,3vw,30px);perspective:max(1500px,110vw);perspective-origin:50% 42%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;contain:layout paint;outline:none}
.hg__stage.drag{cursor:grabbing}
.hg__stage:focus-visible{box-shadow:inset 0 0 0 2px #9B5CFF;border-radius:22px}
.hg__card{position:absolute;left:50%;top:calc(var(--cw) * .75 + 20px);width:var(--cw);height:calc(var(--cw) * 1.5);margin:calc(var(--cw) * -.75) 0 0 calc(var(--cw) * -.5);border-radius:20px;will-change:transform,opacity;backface-visibility:hidden;-webkit-tap-highlight-color:transparent;text-decoration:none;transform-style:preserve-3d}
.hg__ph{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#111;box-shadow:0 30px 60px -28px rgba(0,0,0,.4)}
html[data-theme="dark"] .hg__ph{box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.hg__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.hg__sh{position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none;will-change:opacity}
.hg__card:focus-visible{outline:3px solid #9B5CFF;outline-offset:4px}
.hg__arw{position:absolute;top:calc(var(--cw) * .75 + 20px);z-index:2000;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 72%,transparent);color:var(--ink);display:none;place-items:center;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);opacity:0;cursor:pointer;transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.hg__arw svg{width:16px;height:16px}
.hg__arw--l{left:max(16px,3vw)}.hg__arw--r{right:max(16px,3vw)}
.hg__arw:hover{transform:scale(1.08)}
.hg__arw:active{transform:scale(.94)}
.hg__arw:focus-visible{opacity:1;outline:2px solid #9B5CFF;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.hg__arw{display:grid}.hg:hover .hg__arw{opacity:1}}

/* no JS: plain swipe row */
.hg__stage:not(.on){display:flex;gap:12px;overflow-x:auto;height:auto;perspective:none;contain:none;cursor:auto;padding:0 max(16px,4vw)}
.hg__stage:not(.on) .hg__card{position:relative;left:auto;top:auto;margin:0;flex:none;width:min(240px,62vw)}
.hg__stage:not(.on) .hg__ph{position:relative;aspect-ratio:2/3}
@media(prefers-reduced-motion:reduce){.hg__word .w i{transition:opacity .2s}}

/* full width: the section ignores any page max-width so the fan can reach both screen edges */
.hg{width:100%;max-width:none;overflow:hidden}
@media(max-width:700px){.hg__stage{height:calc(var(--cw) * 1.5 + 60px)}}