/* =========================================================
   WOW layer for the generated-site examples
   techniques common to award-winning sites, built from scratch:
   liquid image, cursor lens reveal, kinetic variable type,
   3D tilt windows, marquee, living UI
   ========================================================= */

/* 3D tilt: windows lean toward the cursor */
.shot { transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); will-change: transform; }
.shot:hover { box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.45), 0 50px 90px -40px rgba(47, 107, 255, 0.35); }
.shot-body::after { /* glare that follows the cursor */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--gx, 50%) var(--gy, -30%), rgba(255, 255, 255, 0.16), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ---------- Север hero: liquid photo + lens reveal + kinetic wordmark ---------- */
.sv-photo { filter: url(#liquid); animation: kenburns 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translateX(-2%); } }
.sv-photo--alt {
  z-index: 0;
  -webkit-mask-image: radial-gradient(circle var(--lr, 0px) at var(--lx, 70%) var(--ly, 45%), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr, 0px) at var(--lx, 70%) var(--ly, 45%), #000 98%, transparent 100%);
  filter: url(#liquid) saturate(1.2) contrast(1.05);
}
.sv-lens {
  position: absolute;
  z-index: 3;
  left: var(--lx, 70%);
  top: var(--ly, 45%);
  width: calc(var(--lr, 0px) * 2);
  height: calc(var(--lr, 0px) * 2);
  margin: calc(var(--lr, 0px) * -1) 0 0 calc(var(--lr, 0px) * -1);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(239, 231, 218, 0.55), 0 0 40px rgba(255, 107, 26, 0.25);
  pointer-events: none;
}
.sv-word span, .mk2-word span {
  display: inline-block;
  animation: wght 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.12s);
}
@keyframes wght {
  0%, 100% { font-weight: 700; transform: translateY(0); }
  50% { font-weight: 300; transform: translateY(-4%); }
}
.sv-btn { overflow: hidden; }
.sv-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.2s 1.5s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { transform: translateX(120%); } }

/* ---------- Север case: marquee + parallax photo ---------- */
.sv2 { position: relative; }
/* the collection ticker is its own dark band at the bottom: it never runs under text */
.sv2-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 11%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1d1712;
  pointer-events: none;
}
.sv2-marq {
  display: flex;
  width: max-content;
  font-size: clamp(11px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #efe7da;
  animation: marq 18s linear infinite;
}
.sv2-marq span { padding-right: 0.4em; }
@keyframes marq { to { transform: translateX(-50%); } }
.sv2-text { position: relative; z-index: 1; }
.sv2 img { position: relative; z-index: 1; transform: translate(var(--px, 0), var(--py, 0)) scale(1.08); transition: transform 0.8s var(--ease); }

/* ---------- Мука: breathing loaf, steam, drifting flour ---------- */
.mk2::before { animation: flour 16s linear infinite; }
@keyframes flour { to { background-position: 44px -260px; } }
.mk2-loaf { animation: rise 4.5s ease-in-out infinite; }
@keyframes rise { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.04, 1.07); } }
.mk2-steam { position: absolute; right: 18%; top: 8%; width: 24%; height: 20%; pointer-events: none; }
.mk2-steam i {
  position: absolute;
  bottom: 0;
  width: 22%;
  aspect-ratio: 1 / 1.6;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.85), transparent 70%);
  filter: blur(4px);
  opacity: 0;
  animation: steam 3.6s ease-out infinite;
}
.mk2-steam i:nth-child(1) { left: 6%; }
.mk2-steam i:nth-child(2) { left: 30%; animation-delay: 0.9s; }
.mk2-steam i:nth-child(3) { left: 54%; animation-delay: 1.8s; }
.mk2-steam i:nth-child(4) { left: 76%; animation-delay: 2.7s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(40%) scale(0.6); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-120%) scale(1.5) translateX(10%); }
}
.mk2-menu li { transition: transform 0.4s var(--ease); }
.mk2:hover .mk2-menu li:nth-child(1) { transform: translateX(6px); }
.mk2:hover .mk2-menu li:nth-child(2) { transform: translateX(10px); transition-delay: 0.05s; }
.mk2:hover .mk2-menu li:nth-child(3) { transform: translateX(14px); transition-delay: 0.1s; }

/* ---------- Орбита: living product UI ---------- */
.ob-cols { position: relative; }
.ob-fly {
  position: absolute;
  z-index: 2;
  left: 35%;
  top: 1.9em;
  width: 30%;
  margin: 0;
  box-shadow: inset 3px 0 0 #2f6bff, 0 14px 30px -12px rgba(47, 107, 255, 0.55) !important;
  animation: fly 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fly {
  0%, 18% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(30%, -20%) rotate(3deg); }
  52%, 82% { transform: translate(117%, 330%) rotate(0); }
  100% { transform: translate(0, 0); }
}
.ob-prog i { animation: prog 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes prog { 0%, 40% { right: 33%; } 55%, 85% { right: 28%; } 100% { right: 33%; } }
.ob-prog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: translateX(-100%); animation: sweep 2.4s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.ob-side .on { position: relative; }
.ob-side .on::before { content: ""; position: absolute; left: -12%; top: 15%; bottom: 15%; width: 2px; border-radius: 2px; background: #2f6bff; }

/* =========================================================
   Лев Орлов — racer (genre of athlete award sites; own design)
   ========================================================= */
.rc { background: #0c0d10; color: #f2f2f2; }
.rc-speed { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 255, 255, 0.035) 46px 48px); animation: speed 0.6s linear infinite; }
@keyframes speed { to { background-position: -96px 0; } }
.rc-top, .rc-num, .rc-name, .rc-track, .rc-tele { position: absolute; z-index: 1; }
.rc-top { left: 5%; right: 5%; top: 5%; display: flex; gap: 5%; font-size: clamp(9px, 0.8vw, 12px); color: rgba(255, 255, 255, 0.7); }
.rc-top b { margin-right: auto; color: #fff; letter-spacing: 0.24em; }
.rc-num {
  right: 3%;
  top: 2%;
  font-size: clamp(120px, 15vw, 250px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.08em;
  line-height: 1;
  background: linear-gradient(100deg, #ff6b1a 10%, #ffd23f 45%, #ff6b1a 60%, #2f6bff 95%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skewX(-8deg);
  animation: livery 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite, launch 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 18px 30px rgba(255, 107, 26, 0.25));
}
@keyframes livery { to { background-position: -160% 0; } }
@keyframes launch {
  0%, 70%, 100% { transform: skewX(-8deg) translateX(0); }
  80% { transform: skewX(-16deg) translateX(-3%); }
  88% { transform: skewX(-4deg) translateX(1%); }
}
.rc-name { left: 5%; top: 24%; margin: 0; font-size: clamp(28px, 3.4vw, 56px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; text-transform: uppercase; }
.rc-track { left: 4%; bottom: 8%; width: 46%; overflow: visible; }
.rc-track path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-dasharray: 4 5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.rc-car { fill: #ff6b1a; filter: drop-shadow(0 0 6px #ff6b1a); }
.rc-tele { right: 5%; bottom: 9%; display: grid; gap: 0.3em; justify-items: end; font-family: var(--mono); font-size: clamp(9px, 0.8vw, 12px); color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.08em; }
.rc-tele b { font-size: clamp(20px, 2.3vw, 36px); color: #fff; letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.rc-sec { display: flex; gap: 4px; }
.rc-sec i { width: clamp(22px, 2.6vw, 40px); height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); animation: sector 4.2s steps(1) infinite; }
.rc-sec i:nth-child(2) { animation-delay: 1.4s; }
.rc-sec i:nth-child(3) { animation-delay: 2.8s; }
@keyframes sector {
  0% { background: #3ddc97; }
  33% { background: #ffd23f; }
  66% { background: rgba(255, 255, 255, 0.15); }
}

/* =========================================================
   Айсберг — immersive scene (genre of 3D award sites; own design)
   ========================================================= */
.ib { background: linear-gradient(180deg, #cfe3f6 0%, #eaf3fb 46%, #0d3a66 54%, #041a33 100%); color: #06223f; perspective: 900px; }
.ib-snow { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(#fff 1px, transparent 1.6px), radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1.4px); background-size: 40px 46px, 64px 70px; animation: snow 9s linear infinite; opacity: 0.8; }
@keyframes snow { to { background-position: 30px 460px, -40px 700px; } }
.ib-top, .ib-title, .ib-btn { position: absolute; z-index: 4; }
.ib-top { left: 5%; right: 5%; top: 5%; display: flex; gap: 5%; font-size: clamp(9px, 0.8vw, 12px); color: #1f4a73; }
.ib-top b { margin-right: auto; color: #06223f; font-weight: 700; letter-spacing: -0.02em; font-size: 1.2em; }
.ib-title { left: 5%; top: 17%; margin: 0; font-size: clamp(22px, 2.8vw, 46px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.ib-title em { font-style: normal; color: #2f6bff; }
.ib-btn { right: 5%; bottom: 8%; padding: 0.7em 1.2em; border-radius: 99px; background: #fff; color: #06223f; font-size: clamp(9px, 0.85vw, 13px); font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
.ib-scene { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; transform: rotateY(calc(var(--px, 0) * 1deg)) rotateX(calc(var(--py, 0) * 1deg)); transition: transform 0.9s var(--ease); }
.ib-berg { position: absolute; left: 50%; top: 22%; width: 40%; height: 32%; animation: bob 5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(4%) rotate(1.2deg); }
}
.ib-berg i { position: absolute; inset: 0; }
.ib-berg .f1 { clip-path: polygon(8% 100%, 30% 22%, 44% 40%, 58% 0%, 70% 34%, 88% 26%, 100% 100%); background: linear-gradient(120deg, #ffffff 0%, #e4f1fc 45%, #a9cdee 100%); }
.ib-berg .f2 { clip-path: polygon(58% 0%, 70% 34%, 62% 100%, 44% 40%); background: linear-gradient(180deg, #d6eafa, #8fbbe2); }
.ib-berg .f3 { clip-path: polygon(30% 22%, 44% 40%, 36% 100%, 8% 100%); background: linear-gradient(200deg, #f4faff, #b9d8f2); }
.ib-berg .f4 { clip-path: polygon(70% 34%, 88% 26%, 100% 100%, 62% 100%); background: linear-gradient(160deg, #9cc6ea, #5d93c7); }
.ib-deep { position: absolute; left: 44%; top: 54%; width: 52%; height: 40%; clip-path: polygon(14% 0, 96% 0, 82% 60%, 58% 100%, 30% 74%, 4% 30%); background: linear-gradient(180deg, rgba(120, 190, 255, 0.55), rgba(47, 107, 255, 0.15)); filter: blur(1.5px); animation: bob 5s ease-in-out infinite; }
.ib-water { position: absolute; left: 0; right: 0; top: 53%; height: 3%; }
.ib-water i { position: absolute; left: -10%; right: -10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); animation: wave 3.4s ease-in-out infinite; }
.ib-water i:nth-child(2) { top: 40%; animation-delay: 0.8s; opacity: 0.6; }
.ib-water i:nth-child(3) { top: 80%; animation-delay: 1.6s; opacity: 0.35; }
@keyframes wave {
  0%, 100% { transform: translateX(-6%); }
  50% { transform: translateX(6%); }
}

/* =========================================================
   Real-time 3D canvases (examples3d.js) + their CSS fallbacks
   ========================================================= */
.gl { position: absolute; display: block; pointer-events: none; }
.gl-sv { right: 0; top: 0; width: 58%; height: 100%; z-index: 0; }
.gl-sv2 { right: 0; top: 0; width: 50%; height: 89%; z-index: 1; }
.gl-rc { inset: 0; width: 100%; height: 100%; z-index: 0; }
.gl-ib { inset: 0; width: 100%; height: 100%; z-index: 1; }
.sv.gl-on .sv-photo, .sv.gl-on .sv-lens { display: none; }
.sv2.gl-on > img { visibility: hidden; }
.rc.gl-on .rc-num, .rc.gl-on .rc-speed { display: none; }
.ib.gl-on .ib-scene, .ib.gl-on .ib-snow { display: none; }
.ib.gl-on { background: #0a2a4a; }
/* Iceberg on WebGL: nav on the thin band of sky, the rest reads light on deep water */
.ib.gl-on .ib-top { color: #1d4a74; }
.ib.gl-on .ib-top b { color: #06223f; }
.ib.gl-on .ib-title { top: 30%; left: 11%; color: #f6f3ec; text-shadow: 0 2px 24px rgba(2, 16, 36, 0.45); }
.ib.gl-on .ib-title em { color: #9fe0ff; }
.ib.gl-on .ib-btn { left: 11%; right: auto; background: #f6f3ec; color: #06223f; }
/* depth gauge: fills the left with the story the headline tells */
.ib-gauge { position: absolute; z-index: 4; left: 4.5%; top: 17%; bottom: 7%; width: 10px; pointer-events: none; display: none; }
.ib.gl-on .ib-gauge { display: block; }
.ib-gauge i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background:
    linear-gradient(#9fe0ff, #9fe0ff) left top / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(159, 224, 255, 0.7) 0 1px, transparent 1px 12px) left top / 6px 100% no-repeat;
}
.ib-gauge i::after { content: ""; position: absolute; left: -3px; top: 9%; width: 7px; height: 7px; border-radius: 50%; background: #ff7716; box-shadow: 0 0 10px #ff7716; }
.ib-gauge span { position: absolute; left: 16px; font-family: var(--mono); font-size: clamp(8px, 0.68vw, 10px); white-space: nowrap; color: #9fe0ff; }
.ib-gauge .g-top { top: 7%; color: #f6f3ec; }
.ib-gauge .g-bot { bottom: 30%; }

/* ---------- Липко — jelly gummies ---------- */
.gm { background: #f6eddf; color: #2a1410; cursor: grab; }
.gm:active { cursor: grabbing; }
.gl-gm { inset: 0; width: 100%; height: 100%; z-index: 0; }
.gm-top, .gm-title, .gm-hint, .gm-btn { position: absolute; z-index: 2; pointer-events: none; }
.gm-top { left: 5%; right: 5%; top: 5%; display: flex; gap: 5%; font-size: clamp(9px, 0.8vw, 12px); color: #6b3a2e; }
.gm-top b { margin-right: auto; color: #2a1410; letter-spacing: 0.24em; font-weight: 800; }
.gm-title { left: 5%; top: 20%; margin: 0; font-size: clamp(24px, 3vw, 50px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.gm-title em { font-style: normal; color: #e8364f; }
.gm-hint { left: 5%; bottom: 20%; font-family: var(--mono); font-size: clamp(9px, 0.75vw, 11px); letter-spacing: 0.08em; text-transform: uppercase; color: #9a6a5c; }
.gm-btn { left: 5%; bottom: 8%; padding: 0.7em 1.2em; border-radius: 99px; background: #e8364f; color: #fff6ec; font-size: clamp(9px, 0.85vw, 13px); font-weight: 600; }
/* CSS fallback when WebGL is unavailable */
.gm-fallback { position: absolute; inset: 0; z-index: 0; }
.gm-fallback i { position: absolute; border-radius: 50%; animation: bob 4s ease-in-out infinite; }
.gm-fallback i:nth-child(1) { right: 22%; top: 28%; width: 22%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #ff8a9a 18%, #e8364f 60%, #9e1730); }
.gm-fallback i:nth-child(2) { right: 8%; top: 18%; width: 16%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #ffc07a 18%, #ff8a1f 60%, #b5520a); animation-delay: 0.6s; }
.gm-fallback i:nth-child(3) { right: 12%; top: 52%; width: 18%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #d6f09a 18%, #9bd63a 60%, #5c8a16); animation-delay: 1.2s; }
.gm-fallback i:nth-child(4) { right: 34%; top: 56%; width: 13%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #ffe9a0 18%, #ffd23f 60%, #b88f0a); animation-delay: 1.8s; }
.gm.gl-on .gm-fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .shot { transform: none !important; }
  .sv-photo, .sv-word span, .mk2-word span, .sv2-marq, .mk2-loaf, .mk2-steam i, .mk2::before, .ob-fly, .ob-prog i, .ob-prog::after, .sv-btn::after,
  .rc-speed, .rc-num, .rc-track path, .rc-sec i, .ib-snow, .ib-berg, .ib-deep, .ib-water i { animation: none !important; }
}

/* =========================================================
   COLOUR ROLES (see the system in style.css :root)
   orange = the one human action per screen; blue = the machine
   ========================================================= */
::selection { background: var(--orange); color: var(--on-accent); }
:focus-visible { outline-color: var(--blue); }
.btn { background: var(--ink); color: var(--bg); }
.btn--primary, .brief-form .btn { background: var(--orange); color: var(--on-accent); }
.btn--primary:hover, .brief-form .btn:hover { background: var(--orange-hi); color: var(--on-accent); }
.btn:not(.btn--primary):not(.btn--ghost):hover { background: var(--blue); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.top .btn--sm { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.top .btn--sm:hover { background: var(--ink); color: var(--bg); box-shadow: none; }
/* app window: "Next" is the window's one action */
.appwin .pill { background: var(--orange); color: var(--on-accent); }
.appwin .pill:hover { background: var(--orange-hi); color: var(--on-accent); }
.model.is-on { background: var(--blue); }
.stepper button.is-done { color: var(--blue-text); }
.stepper-bar i { background: var(--blue); }
.num, .proto .num { color: var(--blue-text); }
.hud-state { color: var(--blue-text); }
.hud-dots i { background: var(--orange); }
.hud-dots i:nth-child(2) { background: var(--blue); }
.hud-dots i:nth-child(3) { background: var(--ink); }
.crew .role { color: var(--orange); }
.crew a:hover { color: var(--blue-text); }
.mk { border-color: var(--blue); background: var(--blue-soft); }
.mk b { background: var(--blue); }
.mk i { border-color: var(--blue); }
.logo-sq { background: var(--ink); }
.logo-sq::after { border-left-color: var(--orange); }
/* labels in sentence case, no mono caps */
.stats dt { font-family: var(--f); text-transform: none; letter-spacing: -0.01em; font-size: 13px; color: var(--dim); }
.foot h4 { font-family: var(--f); text-transform: none; letter-spacing: -0.01em; font-size: 13px; color: var(--dim); }
.proto-step { font-size: 14px; color: var(--dim); margin: 0; }
.proto-step .proto-count { color: var(--orange); font-variant-numeric: tabular-nums; }
.brief-label { font-family: var(--f); text-transform: none; letter-spacing: -0.01em; font-size: 14px; color: var(--mute); }
.dim { color: var(--dim); }