/* Regletto home — glass, depth, motion. Colours are tokens, only ever mixed, never written out. */

/* ---- Hero ---- */
.hero-home { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: min(100vh, 808px); }
.hero-home .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px; align-items: center; width: min(1200px, 100% - 48px); }
.hero-home .copy { position: relative; z-index: 2; padding: 48px 0 64px; }
.hero-home h1 { font-size: clamp(40px, 6.1vw, 76px); }
.say { margin-top: 28px; max-width: 30ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soft); }



.art { position: relative; height: min(540px, 58vw); z-index: 1; }
.p { position: absolute; left: var(--x); top: var(--y); transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px), 0); transition: transform 600ms var(--ease); }
/* --k scales every tile on small screens, --z is the size it ends up at */
.tile { --z: calc(var(--s) * var(--k, 1)); width: var(--z); height: var(--z); display: block; }
.f { position: relative; display: block; width: 100%; height: 100%; animation: wander var(--dur, 18s) ease-in-out infinite; animation-delay: var(--del, 0s); }
@keyframes wander {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--ax), var(--ay)) rotate(var(--r)); }
  50% { transform: translate(var(--bx), var(--by)) rotate(calc(var(--r) * -1)); }
  75% { transform: translate(calc(var(--ax) * -0.6), calc(var(--ay) * -0.8)) rotate(calc(var(--r) * 0.5)); }
}
.face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 28%; transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
a.tile .face .mark { width: 54%; height: 54%; }
a.tile:focus-visible .face { transform: scale(1.08); box-shadow: var(--cast-up), 0 0 0 1px var(--hair), 0 0 44px color-mix(in srgb, var(--accent) 45%, transparent); }
.lab { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-size: 16px; font-weight: 500; }
.lab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-state) var(--ease); }
a.tile:focus-visible .lab::after { transform: scaleX(1); }
.soon .face { position: relative; background: var(--void); color: color-mix(in srgb, #fff 64%, var(--void)); font-weight: 500; line-height: 1; box-shadow: var(--cast), inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--page) 16%, transparent); cursor: help; }
.soon .q, .soon .w { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.soon .q { font-size: calc(var(--z) * 0.42); }
.soon .w { font-size: calc(var(--z) * 0.24); letter-spacing: 0.08em; opacity: 0; transform: scale(0.7); }
/* a touch screen keeps :hover after a tap, so the tiles only answer a real pointer */
@media (hover: hover) {
  a.tile:hover .face { transform: scale(1.08); box-shadow: var(--cast-up), 0 0 0 1px var(--hair), 0 0 44px color-mix(in srgb, var(--accent) 45%, transparent); }
  a.tile:hover .lab::after { transform: scaleX(1); }
  .soon:hover .face { transform: scale(1.06); }
  .soon:hover .q { opacity: 0; transform: scale(0.6); }
  .soon:hover .w { opacity: 1; transform: none; }
}

/* ---- Products ---- */
.prod { position: relative; overflow: hidden; padding: 88px 0 72px; }
.prod .blob { animation-duration: 34s; }
.prod .b1 { right: auto; left: 12%; top: 18%; width: 480px; height: 480px; }
.prod .b2 { right: 6%; bottom: -10%; }
.prod .wrap { position: relative; z-index: 1; }

/* the shot is capped by height, never cropped; the card is as wide as the shot plus its padding */
.deck { --shot: min(calc(44vh * 1920 / 1032), 780px); --pad: 36px; --cw: min(var(--wrap), 100% - 2 * var(--gutter), var(--shot) + 2 * var(--pad)); position: relative; z-index: 1; outline: none; }
.stage { position: relative; perspective: 1800px; height: var(--sh, 640px); }
/* only transform and opacity move; the neighbours' blur switches at once, a moving blur is what stalled */
/* whole pixels only: a card on a half pixel resamples the screenshot */
.card { position: absolute; left: 0; top: 0; width: var(--cw); width: round(down, var(--cw), 1px); height: var(--sh, auto); transition: transform 560ms var(--ease), opacity 420ms var(--ease); }
.card.now { transition-duration: 560ms, 200ms; }
.card.side .panel { filter: blur(6px); }
.card:not(.now) { cursor: pointer; }
.panel { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 26px var(--pad) 28px; border-radius: 28px; background: color-mix(in srgb, var(--page) 94%, transparent); box-shadow: var(--cast-up), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); }
.top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--base); box-shadow: inset 0 0 0 1px var(--hair), var(--cast); }
.icon .mark { width: 30px; height: 30px; }
.icon .q { font-size: 26px; font-weight: 500; line-height: 1; }
.top h3 { font-size: clamp(24px, 2.5vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.view { position: relative; }
.win { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--page); box-shadow: var(--cast-up), 0 0 0 1px var(--hair); transition: transform 450ms var(--ease); }
/* at rest the shot is flat and untransformed: a 3D layer scales it on the GPU and blurs the small UI text */
.win img { width: 100%; height: auto; }
/* the pictures of a card lie in one cell and slide; .win itself is left alone, the pointer tilts it */
.reel { display: grid; }
.slide { grid-area: 1 / 1; transition: transform 560ms var(--ease); }
.win .shot-dark { display: none; }
.hold { display: grid; place-items: center; aspect-ratio: 1920 / 1032; border-radius: 14px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft); position: relative; }
.body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px 28px; align-items: center; margin-top: auto; padding-top: 22px; }
.view + .body { margin-top: 24px; border-top: 1px solid var(--hair); }
.desc { max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--soft); }
.meta { display: flex; }
/* a narrow card (short window) puts the description on its own line */
.panel { container-type: inline-size; }
@container (max-width: 780px) { .body { grid-template-columns: minmax(0, 1fr) auto; } .desc { grid-column: 1 / -1; max-width: none; } .meta > div:first-child { padding-left: 0; border-left: 0; } }
.meta > div { padding: 2px 24px; border-left: 1px solid var(--hair); }
.meta dt { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); }
.meta dd { margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.35; }

/* arrows float over the card, halfway down its left and right edge */
.go { position: absolute; z-index: 20; top: calc(var(--sh, 640px) / 2 - 26px); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; opacity: 0.72; background: color-mix(in srgb, var(--page) 58%, transparent); transition: transform var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
.go[hidden] { display: none; }
.go:hover, .go:focus-visible { opacity: 1; transform: scale(1.08); }
/* while the cards slide, the arrows step out of the way and come back once they have settled */
.deck.moving .go { opacity: 0; pointer-events: none; transition-duration: 160ms; }
.go.prev { left: calc(50% - var(--cw) / 2 + 18px); }
.go.next { right: calc(50% - var(--cw) / 2 + 18px); }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
.dots { display: flex; justify-content: center; align-items: center; gap: 10px; }
.dots[hidden] { display: none; }
.pg { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: color-mix(in srgb, var(--ink) 24%, transparent); transition: color var(--t-state) var(--ease); }
.pg:hover, .pg:focus-visible { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.pg .ms { font-size: 22px; }
.dot { position: relative; width: 10px; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 24%, transparent); transition: width 450ms var(--ease), background-color var(--t-state) var(--ease); }
.dot::before { content: ''; position: absolute; inset: -12px -6px; }
.dot:hover { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.dot[aria-current='true'] { width: 30px; background: var(--accent); }
.dot::after { content: attr(data-name); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--ink); color: var(--page); font-size: 13px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.dot:hover::after, .dot:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .hero-home { min-height: 0; }
  .hero-home .wrap { grid-template-columns: 1fr; }
  .hero-home .copy { padding: 56px 0 8px; }
  /* one column: the tiles get their own band, Writing in the middle, positioned by their centre (--cx, --cy) */
  .art { --k: 0.8; height: 400px; margin: 24px 0 48px; }
  .art .p { left: calc(var(--cx) - var(--z) / 2); top: calc(var(--cy) - var(--z) / 2); }
  .deck { --pad: 18px; }
  .panel { padding: 18px var(--pad) 22px; border-radius: 22px; }
  .top { margin-bottom: 16px; gap: 12px; }
  .icon { width: 42px; height: 42px; border-radius: 12px; }
  .icon .mark { width: 24px; height: 24px; }
  .view + .body { margin-top: 20px; }
  .body { grid-template-columns: 1fr; gap: 16px; padding-top: 18px; }
  .meta > div:first-child { padding-left: 0; border-left: 0; }
  .go { width: 42px; height: 42px; top: calc(var(--sh, 640px) / 2 - 21px); }
  .go.prev { left: calc(50% - var(--cw) / 2 + 8px); }
  .go.next { right: calc(50% - var(--cw) / 2 + 8px); }
}
@media (max-width: 600px) {
  .hero-home h1 { font-size: clamp(34px, 10vw, 44px); }
  .say { margin-top: 20px; font-size: 17px; }
  .art { --k: 0.6; height: 330px; margin: 32px 0 40px; }
  .lab { top: calc(100% + 10px); font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .f { animation: none !important; }
  .slide { transition: none; }
}


/* ---- WIP: products still on the drawing board — a sketch being drawn, a scan passing over it ---- */
.card.wip { --glow: color-mix(in srgb, var(--accent) 60%, #fff); --night: color-mix(in srgb, #000 58%, var(--void)); --edge: color-mix(in srgb, #fff 12%, transparent); }
.card.wip .panel { background: color-mix(in srgb, var(--void) 95%, transparent); color: color-mix(in srgb, #fff 84%, var(--void)); }
.card.wip .desc { color: color-mix(in srgb, #fff 60%, var(--void)); }
.card.wip .view + .body { border-top-color: var(--edge); }
/* the card is as tall as the tallest product; the drawing board takes up the rest */
.card.wip .view { flex: 1; display: flex; }
.card.wip .hold { flex: 1; aspect-ratio: auto; }
.card.wip .icon { background: none; box-shadow: none; color: var(--glow); }
.card.wip .icon .q { font-size: 24px; text-shadow: 0 0 14px color-mix(in srgb, var(--glow) 70%, transparent); }

/* a turning light runs around the edge */
.ring { position: relative; overflow: hidden; isolation: isolate; }
.ring::before { content: ''; position: absolute; inset: -50%; z-index: -2; background: conic-gradient(transparent 0 62%, var(--glow) 86%, transparent 94%), var(--edge); animation: spin 4.5s linear infinite; }
.ring::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: var(--night); }
@keyframes spin { to { transform: rotate(1turn); } }

.hold.void { overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; color: var(--glow);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 55%),
    radial-gradient(color-mix(in srgb, #fff 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--night);
  box-shadow: inset 0 0 0 1px var(--edge); }
.hold.void::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--night) 80%, transparent) 12%, transparent 46%); }
.hold.void::before { content: ''; position: absolute; left: 10%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 24%, transparent), transparent 65%); animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(60%, 70%) scale(1.2); } }
.sketch { position: absolute; inset: 8% 7%; }
.sketch i { position: absolute; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--glow) 55%, transparent); background: color-mix(in srgb, var(--glow) 6%, transparent); animation: draft 5.4s var(--ease) infinite; animation-delay: calc(var(--n) * 220ms); }
@keyframes draft { 0%, 100% { opacity: 0.45; } 35%, 55% { opacity: 1; } }
.scan { position: absolute; inset: 0 auto 0 0; width: 26%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glow) 13%, transparent) 70%, color-mix(in srgb, var(--glow) 45%, transparent) 71%, transparent 72%); transform: translateX(-100%); animation: scan 6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes scan { 70%, 100% { transform: translateX(400%); } }
.core { z-index: 1; display: grid; place-items: center; width: clamp(84px, 10vw, 124px); aspect-ratio: 1; border-radius: 30%; box-shadow: 0 0 70px color-mix(in srgb, var(--glow) 30%, transparent), 0 18px 40px -12px #000; animation: bob 5s ease-in-out infinite; }
.hold .big { font-size: clamp(44px, 5.4vw, 66px); font-weight: 500; line-height: 1; text-shadow: 0 0 24px color-mix(in srgb, var(--glow) 65%, transparent); }
@keyframes bob { 50% { transform: translateY(-6px); } }
.hold .wipt { z-index: 1; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, #fff 72%, var(--void)); }
.hold .wipt::after { content: ''; display: inline-block; width: 0.5em; height: 1.1em; margin-left: 4px; vertical-align: -0.2em; background: var(--glow); animation: blink 1.1s steps(1) infinite; }
/* nothing moves on the blurred neighbours, redrawing them every frame is what makes the deck stutter */
.card:not(.now) .hold.void::before, .card:not(.now) .ring::before, .card:not(.now) .sketch i, .card:not(.now) .scan, .card:not(.now) .core, .card:not(.now) .wipt::after { animation-play-state: paused; }