/* Interactive layer. Everything here is progressive enhancement: transform/opacity only, GPU-friendly,
   and switched off by fx.js on low-power devices, Save-Data, reduced motion, or when the visitor turns effects off. */

/* ---------- page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(0, 0, .2, 1) .08s both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- intro (pure CSS so it can never get stuck; home page, once per session) ---------- */
html.intro::after { content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none; background: #000 url('/assets/img/logo-white.png') center / min(46vw, 230px) no-repeat; animation: intro-out 1.5s cubic-bezier(.7, 0, .2, 1) .15s both; }
html.intro::before { content: ''; position: fixed; z-index: 1001; left: 50%; top: calc(50% + min(26vw, 140px)); width: min(46vw, 230px); height: 2px; transform: translateX(-50%) scaleX(0); transform-origin: left; background: linear-gradient(90deg, #14B8A6, #8B5CF6); box-shadow: 0 0 16px #14B8A6; animation: intro-bar 1s cubic-bezier(.6, 0, .2, 1) .1s both, intro-bar-out .3s ease 1.1s forwards; }
@keyframes intro-out { 0%, 62% { opacity: 1; background-size: min(46vw, 230px); filter: none; } 100% { opacity: 0; background-size: min(120vw, 900px); filter: blur(10px); visibility: hidden; } }
@keyframes intro-bar { to { transform: translateX(-50%) scaleX(1); } }
@keyframes intro-bar-out { to { opacity: 0; } }

/* ---------- scroll progress ---------- */
#fx-progress { position: fixed; z-index: 500; left: 0; top: 0; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #14B8A6, #8B5CF6 60%, #EC4899); box-shadow: 0 0 12px rgba(20, 184, 166, .7); pointer-events: none; will-change: transform; }

/* ---------- cursor ring ---------- */
.fx-ring, .fx-lab { position: fixed; z-index: 600; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .25s; }
.fx-ring { width: 17px; height: 17px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='none' stroke='white' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mix-blend-mode: difference; transition: opacity .25s, background-image .2s; }
.fx-ring.on { opacity: .5; }
.fx-ring.hov { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='white' stroke='white' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fx-ring.txt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='%2314B8A6' stroke='%2314B8A6' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E"); mix-blend-mode: normal; }
.fx-lab { font: 700 .62rem/1 'Syne', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #001a17; transform: translate3d(-100px, -100px, 0); white-space: nowrap; }
.fx-lab.on { opacity: 1; }

/* ---------- tilt + glare ---------- */
.tile, .product, .tool, .feat-tile, .credit-grid button { perspective: 900px; }
.fx-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fx-tilt.live { transition: transform .08s linear; }
.tile .img, .product .img { position: relative; }
.tile .img::after, .product .img::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--go, 0); background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 55%); transition: opacity .3s; mix-blend-mode: soft-light; }

/* ---------- split-text titles ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.split .ch { display: inline-block; transform: translateY(115%) rotate(7deg); opacity: 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; transition-delay: calc(var(--i) * 28ms + 120ms); }
.split.in .ch { transform: none; opacity: 1; }
.split .sp { display: inline-block; width: .28em; }

/* ---------- scrolling text band ---------- */
.band { overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem) 0; user-select: none; }
.band-track { display: flex; width: max-content; will-change: transform; }
.band-track span { flex: none; padding-right: .5em; font: 800 clamp(3.4rem, 11vw, 9.5rem)/1 'Syne', sans-serif; letter-spacing: -.01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .32); }
.band-track span em { font-style: normal; color: #149F91; -webkit-text-stroke: 0; }
.band-track span i { font-style: normal; color: #8B5CF6; -webkit-text-stroke: 0; padding: 0 .25em; }
.band.alt .band-track span { -webkit-text-stroke-color: rgba(20, 159, 145, .55); }

/* ---------- home hero scroll-linked + glitch ---------- */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #000; opacity: calc(var(--hp, 0) * .85); pointer-events: none; }
.hero-title { transform: translate(-50%, calc(-50% + var(--hp, 0) * -140px)) scale(calc(1 - var(--hp, 0) * .18)); opacity: calc(1 - var(--hp, 0) * 1.5); will-change: transform, opacity; animation: glitch 7s steps(1) infinite; }
@keyframes glitch {
  0%, 93%, 100% { filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .5)); }
  94% { filter: drop-shadow(5px 0 0 #22D3EE) drop-shadow(-5px 0 0 #EC4899); margin-left: 4px; }
  95.5% { filter: drop-shadow(-4px 0 0 #22D3EE) drop-shadow(4px 0 0 #EC4899); margin-left: -3px; }
  97% { filter: drop-shadow(2px 0 0 #22D3EE) drop-shadow(-2px 0 0 #EC4899); margin-left: 0; }
}
.hero-title:hover { animation-duration: 1.2s; }
.marquee { will-change: transform; }

/* ---------- liquid-field iframes (Games / Store / Contact / Tools) ---------- */
.liquid-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: -1; opacity: 0; transition: opacity 1.2s ease; background: transparent; }
.liquid-frame.ready { opacity: 1; }
.has-field::before, .has-field::after { opacity: .5; }
.liquid .big-hero, .liquid .store-hero, .liquid .contact-box { pointer-events: none; }
.liquid .contact-box form, .liquid .search { pointer-events: auto; }
.tools-glow { position: relative; }
.tools-glow > .liquid-frame { z-index: -1; height: 100%; }

/* tool tiles: spotlight that follows the cursor */
.tool { position: relative; padding: 1rem .6rem; border-radius: 20px; }
.tool::before { content: ''; position: absolute; inset: 0; border-radius: 20px; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(20, 184, 166, .22), transparent 62%); pointer-events: none; }
.tool:hover::before { opacity: 1; }

/* ---------- End: Awakening ---------- */
.end-stage { position: relative; isolation: isolate; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.end-top h1 { animation: end-flicker 6s steps(1) infinite; }
@keyframes end-flicker { 0%, 90%, 100% { text-shadow: none; transform: none; } 91% { text-shadow: 3px 0 #EC4899, -3px 0 #22D3EE; transform: translateX(2px); } 92% { text-shadow: -3px 0 #EC4899, 3px 0 #22D3EE; transform: translateX(-3px) skewX(-3deg); } 93% { text-shadow: none; transform: none; } 96% { opacity: .75; } 97% { opacity: 1; } }
.glitch { animation: jitter 4s steps(1) infinite; }
@keyframes jitter { 0%, 85%, 100% { transform: none; filter: none; } 86% { transform: translateX(3px) skewX(6deg); filter: hue-rotate(60deg); } 88% { transform: translateX(-4px); } 90% { transform: none; filter: none; } }
body.fx-shake { animation: shake .6s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 1px, 0); } 30%, 50%, 70% { transform: translate3d(-7px, -1px, 0); } 40%, 60% { transform: translate3d(7px, 1px, 0); } }

/* ---------- trail / confetti canvas ---------- */
#fx-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 450; pointer-events: none; mix-blend-mode: screen; }

/* ---------- toast ---------- */
.fx-toast { position: fixed; z-index: 700; left: 50%; bottom: 2rem; transform: translate(-50%, 30px); opacity: 0; padding: .85rem 1.4rem; border-radius: 999px; background: rgba(10, 10, 13, .92); border: 1px solid rgba(20, 184, 166, .6); box-shadow: 0 0 30px rgba(20, 184, 166, .35); color: #fff; font: 600 .95rem 'Source Sans 3', sans-serif; letter-spacing: .03em; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; pointer-events: none; }
.fx-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- command palette ---------- */
.cmdk-hint { display: inline-flex; align-items: center; gap: .6rem; background: none; color: inherit; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .82rem; letter-spacing: .06em; cursor: pointer; transition: border-color .2s, background .2s; }
.cmdk-hint:hover { border-color: #149F91; background: rgba(20, 159, 145, .12); }
.cmdk-hint kbd, .cmdk kbd { font: 600 .68rem 'Source Sans 3', sans-serif; padding: .15rem .4rem; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .3); opacity: .85; }
.cmdk { position: fixed; inset: 0; z-index: 800; display: grid; place-items: start center; padding: 12vh 1rem 1rem; background: rgba(0, 0, 0, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cmdk[hidden] { display: none; }
.cmdk-panel { width: min(100%, 640px); background: #0b0b0e; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 100px rgba(0, 0, 0, .8), 0 0 60px rgba(20, 159, 145, .18); animation: cmdk-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.cmdk-panel input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 500 1.2rem 'Source Sans 3', sans-serif; padding: 1.2rem 1.4rem; outline: none; letter-spacing: .02em; }
.cmdk-list { list-style: none; margin: 0; padding: .5rem; max-height: min(52vh, 420px); overflow-y: auto; }
.cmdk-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: 10px; cursor: pointer; color: #e6e6ec; }
.cmdk-list li[aria-selected="true"] { background: rgba(20, 159, 145, .22); color: #fff; }
.cmdk-list li b { font: 700 .62rem 'Syne', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #149F91; flex: none; }
.cmdk-empty { padding: 1.6rem; text-align: center; opacity: .6; }
.cmdk-foot { display: flex; gap: 1.2rem; padding: .7rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .78rem; opacity: .7; }

/* ---------- portfolio shuffle button ---------- */
.filters .shuffle { display: inline-flex; align-items: center; gap: .45rem; opacity: 1; color: #149F91; border-color: transparent; }
.filters .shuffle:hover { color: #fff; }

/* ---------- gating: when effects are off, keep static fallbacks ---------- */
html.fx-off .hero-title, html.fx-off .end-top h1, html.fx-off .glitch { animation: none; }
html.fx-off .hero::after { display: none; }
@media (hover: none), (pointer: coarse) { .fx-ring, .fx-lab { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.intro::after, html.intro::before { display: none; }
  .hero-title, .end-top h1, .glitch { animation: none; }
  .split .ch { transform: none; opacity: 1; transition: none; }
}

/* neumorphic resting state: raised soft-lit hexagon (inverting lens kept for hover/text) */
.fx-ring:not(.hov):not(.txt) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2334383e'/%3E%3Cstop offset='1' stop-color='%2315171a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='50,6 89,28 89,72 50,94 11,72 11,28' fill='url(%23g)' stroke='rgba(255,255,255,.28)' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); mix-blend-mode: normal; filter: drop-shadow(-2px -2px 2px rgba(255,255,255,.35)) drop-shadow(3px 3px 3px rgba(0,0,0,.95)); }
.fx-ring { transition: opacity .25s, background-image .2s, filter .2s; }