/* ==========================================================================
   Xenzura — Coming soon
   Mobile first. Dark by default, light via [data-theme="light"].
   ========================================================================== */

/* ---------- Font (self-hosted, variable: weight 200–800, width 75–100) ---------- */
@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/bricolage-grotesque-latin-wdth-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font: "Bricolage", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Greens taken from the illustration */
  --brand: #0a9f55;
  --mint: #19e68c;
  --lime: #b6ff5c;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);

  --pad: clamp(1.25rem, 5vw, 3rem);
}

:root,
[data-theme="dark"] {
  --bg: #04120b;
  --ink: #effff6;
  --muted: #8fc9a8;
  --line: rgba(143, 201, 168, .30);
  --accent: var(--mint);
  --hot: var(--lime);

  /* COMING: face + extruded side */
  --face: #effff6;
  --side: #0a9f55;
  --stroke: #effff6;
  --flash: rgba(25, 230, 140, .28);
  --ring: var(--mint);
}

[data-theme="light"] {
  --bg: #ecfff4;
  --ink: #052b17;
  --muted: #3c7a58;
  --line: rgba(5, 43, 23, .24);
  --accent: var(--brand);
  --hot: var(--mint);

  --face: #0a9f55;
  --side: #a7ecc6;
  --stroke: #052b17;
  --flash: rgba(10, 159, 85, .16);
  --ring: var(--brand);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-stretch: 100%;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .45s ease, color .45s ease;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 4px;
}

/* ---------- Layout ---------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(4.75rem + env(safe-area-inset-top));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-left: max(var(--pad), env(safe-area-inset-left));
}

.stage {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 1.75rem;
  grid-template-areas:
    "hero"
    "art"
    "reach";
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
}

.hero  { grid-area: hero; min-width: 0; }
.art   { grid-area: art; }
.reach { grid-area: reach; }

/* ---------- Headline ---------- */
.name {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .9rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.name::after {
  content: "";
  width: 3.25rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--hot));
}

.headline {
  margin: 0;
  font-weight: 800;
  line-height: 1;
}

.portfolio {
  display: block;
  margin-bottom: .25rem;
  font-size: clamp(1.2rem, 5.6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--muted);
}

.coming,
.soon {
  display: block;
  font-size: min(27vw, 10rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: .86;
  letter-spacing: -.015em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* COMING — each letter is split so it can fall, slam and react to touch */
.coming {
  --extrude:
    .006em .006em 0 var(--side), .012em .012em 0 var(--side), .018em .018em 0 var(--side),
    .024em .024em 0 var(--side), .030em .030em 0 var(--side), .036em .036em 0 var(--side),
    .042em .042em 0 var(--side), .048em .048em 0 var(--side), .054em .054em 0 var(--side),
    .060em .060em 0 var(--side), .066em .066em 0 var(--side), .072em .072em 0 var(--side),
    .078em .078em 0 var(--side), .084em .084em 0 var(--side), .090em .090em 0 var(--side),
    .096em .096em 0 var(--side), .102em .102em 0 var(--side), .108em .108em 0 var(--side);
  padding-bottom: .12em;   /* room for the extrusion */
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ch {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
}

.glyph {
  display: inline-block;
  color: color-mix(in oklab, var(--face), var(--hot) calc(var(--p, 0) * 100%));
  text-shadow: var(--extrude);
  transform: translateY(calc(var(--p, 0) * -.045em)) skewX(calc(var(--p, 0) * -7deg));
  transition: transform .2s var(--ease-out), color .2s ease;
}

/* SOON — outlined, wipes in right after the impact */
.soon {
  color: transparent;
  -webkit-text-stroke: .02em var(--stroke);
  paint-order: stroke fill;
}

/* Hidden only when JS is running; failsafe animations reveal them if JS never arms */
.js .coming:not(.is-armed) .ch {
  opacity: 0;
  animation: reveal-failsafe 0s 3.5s forwards;
}

.js .soon:not(.is-in) {
  clip-path: inset(-.12em 100% -.12em -.12em);
  animation: soon-failsafe 0s 4.5s forwards;
}

.soon.is-in {
  clip-path: inset(-.12em -.12em -.12em -.12em);
  transition: clip-path .75s var(--ease-out);
}

@keyframes reveal-failsafe { to { opacity: 1; } }
@keyframes soon-failsafe   { to { clip-path: inset(-.12em -.12em -.12em -.12em); } }

/* ---------- Building the arena bar (gamer cue) ---------- */
.lobby {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.4rem 0 0;
  max-width: 26rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}

.lobby__bar {
  position: relative;
  flex: 1;
  height: .7rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line);
  overflow: hidden;
}

.lobby__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--mint) 70%, var(--lime));
  transform-origin: 0 50%;
  transform: scaleX(.12);
  animation: lobby-fill 3.2s 1.6s var(--ease-out) forwards;
}

.lobby__bar::after {      /* moving shine */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%);
  animation: lobby-shine 2.2s 2s ease-in-out infinite;
}

.lobby__pct { min-width: 2.6em; text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }

@keyframes lobby-fill  { to { transform: scaleX(.53); } }
@keyframes lobby-shine { to { transform: translateX(420%); } }

/* ---------- App preview (portrait phone) ---------- */
.art {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: .5rem 0 0;
  justify-self: center;
}

.art::before {            /* soft green glow behind the phone */
  content: "";
  position: absolute;
  inset: 6% 0 4%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--mint) 38%, transparent), transparent);
  filter: blur(18px);
  transition: opacity 1.2s ease;
}

/* Intro: hidden only while JS is running; failsafe reveals them if the intro never fires */
.js .art:not(.is-in) img,
.js .art:not(.is-in)::before { opacity: 0; animation: art-failsafe 0s 5.5s forwards; }

.art.is-in::before { animation: glow-pulse 4.5s ease-in-out infinite alternate; }
.art.is-float      { animation: art-float 7s ease-in-out infinite alternate; }

@keyframes art-failsafe { to { opacity: 1; } }
@keyframes glow-pulse   { from { transform: scale(.94); } to { transform: scale(1.05); } }
@keyframes art-float    { from { transform: translateY(0); } to { transform: translateY(-.75rem); } }

.art img {
  display: block;
  width: min(64%, 19rem);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 653 / 1226;
  transform-origin: 50% 90%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Social + contact ---------- */
.reach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials li { perspective: 520px; }

.soc {
  --c: var(--brand);
  --glow: var(--brand);
  --on: #fff;
  --tx: 0px; --ty: 0px; --rx: 0deg; --ry: 0deg;
  --mx: 50%; --my: 50%;

  position: relative;
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  transform: translate(var(--tx), var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .28s var(--ease-out), box-shadow .4s ease;
  -webkit-tap-highlight-color: transparent;
}

.soc--linkedin  { --c: #0a66c2; --glow: #0a66c2; --icon-motion: icon-hop; }
.soc--x         { --c: var(--ink); --glow: var(--ink); --on: var(--bg); --icon-motion: icon-spin; }
.soc--facebook  { --c: #1877f2; --glow: #1877f2; --icon-motion: icon-pop; }
.soc--tiktok    { --c: #000000; --glow: #02c9ce; --on: #ffffff; --icon-motion: icon-pop; }
.soc--instagram {
  --c: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  --glow: #d6249f;
  --icon-motion: icon-wiggle;
}

.soc__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in oklab, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .35s ease;
}

.soc__fill {
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: circle(0 at var(--mx) var(--my));
  transition: clip-path .6s var(--ease-out);
}

.soc svg {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  transition: color .3s ease;
}

.soc__tip {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .25s ease, transform .35s var(--ease-out);
}

.soc::after {            /* ring pulse */
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--glow);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* Active state, shared by hover, keyboard focus and touch press */
.soc:focus-visible { outline-offset: 5px; }

.soc:focus-visible .soc__fill { clip-path: circle(150% at 50% 50%); }
.soc:focus-visible .soc__face { box-shadow: inset 0 0 0 1.5px transparent; }
.soc:focus-visible svg        { color: var(--on); }
.soc:focus-visible .soc__tip  { opacity: 1; transform: translate(-50%, 0); }

@media (hover: hover) and (pointer: fine) {
  .soc:hover {
    box-shadow: 0 16px 36px -10px color-mix(in oklab, var(--glow) 75%, transparent);
  }
  .soc:hover .soc__fill { clip-path: circle(150% at var(--mx) var(--my)); }
  .soc:hover .soc__face { box-shadow: inset 0 0 0 1.5px transparent; }
  .soc:hover svg        { color: var(--on); animation: var(--icon-motion) .75s var(--ease-out) both; }
  .soc:hover .soc__tip  { opacity: 1; transform: translate(-50%, 0); }
  .soc:hover::after     { animation: ring-out .8s ease-out; }
}

@media (hover: none) {
  .soc__tip { display: none; }
  .soc:active { transform: scale(.93); }
  .soc:active .soc__fill { clip-path: circle(150% at var(--mx) var(--my)); transition-duration: .35s; }
  .soc:active svg { color: var(--on); }
  .soc:active::after { animation: ring-out .6s ease-out; }
}

@keyframes ring-out {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.75); }
}

@keyframes icon-hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-.4rem) scale(1.08); }
  62%  { transform: translateY(0) scale(1.12, .86); }
  100% { transform: translateY(0) scale(1.1); }
}

@keyframes icon-spin {
  0%   { transform: rotate(0) scale(1); }
  100% { transform: rotate(360deg) scale(1.15); }
}

@keyframes icon-pop {
  0%   { transform: scale(1) rotate(0); }
  45%  { transform: scale(1.4) rotate(-14deg); }
  100% { transform: scale(1.18) rotate(-6deg); }
}

@keyframes icon-wiggle {
  0%   { transform: rotate(0) scale(1); }
  20%  { transform: rotate(-16deg) scale(1.12); }
  40%  { transform: rotate(13deg) scale(1.12); }
  60%  { transform: rotate(-8deg) scale(1.12); }
  80%  { transform: rotate(4deg) scale(1.12); }
  100% { transform: rotate(0) scale(1.12); }
}

.mails {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
}

.mails__sep {
  align-self: center;
  width: 1.5px;
  height: 1.3em;
  margin-bottom: .3rem;      /* offsets the underline padding of .mail */
  border-radius: 2px;
  background: var(--line);
  font-size: clamp(.9rem, 3.9vw, 1.4rem);
}

.mail {
  width: max-content;
  max-width: 100%;
  padding-bottom: .3rem;
  font-size: clamp(.9rem, 3.9vw, 1.4rem);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 0 .13em no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100% / 100% .06em no-repeat;
  transition: background-size .55s var(--ease-out), color .3s ease;
}

.mail:hover,
.mail:focus-visible {
  color: var(--accent);
  background-size: 100% .13em, 100% .06em;
}

/* TikTok: black tile, white glyph, cyan + red glitch edge (#02c9ce / #fd1a56) */
.soc--tiktok:focus-visible .soc__face { box-shadow: inset 2px 2px 0 #02c9ce, inset -2px -2px 0 #fd1a56; }
.soc--tiktok:focus-visible svg        { filter: drop-shadow(-1.5px -1px 0 #02c9ce) drop-shadow(1.5px 1px 0 #fd1a56); }

@media (hover: hover) and (pointer: fine) {
  .soc--tiktok:hover { box-shadow: -6px 10px 30px -10px rgba(2, 201, 206, .7), 6px 14px 30px -10px rgba(253, 26, 86, .6); }
  .soc--tiktok:hover .soc__face { box-shadow: inset 2px 2px 0 #02c9ce, inset -2px -2px 0 #fd1a56; }
  .soc--tiktok:hover svg        { filter: drop-shadow(-1.5px -1px 0 #02c9ce) drop-shadow(1.5px 1px 0 #fd1a56); }
}

@media (hover: none) {
  .soc--tiktok:active .soc__face { box-shadow: inset 2px 2px 0 #02c9ce, inset -2px -2px 0 #fd1a56; }
  .soc--tiktok:active svg        { filter: drop-shadow(-1.5px -1px 0 #02c9ce) drop-shadow(1.5px 1px 0 #fd1a56); }
}

/* ---------- Footer ---------- */
.foot {
  width: 100%;
  max-width: 82rem;
  margin: 1.5rem auto 0;
  padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}

/* ---------- Theme switch (top right) ---------- */
.theme {
  --w: 4.4rem;
  --h: 2.3rem;
  --t: 1.7rem;

  position: fixed;
  top: calc(1rem + env(safe-area-inset-top));
  right: calc(1rem + env(safe-area-inset-right));
  z-index: 30;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, background-color .3s ease, transform .2s var(--ease-out);
}

.theme:active { transform: scale(.95); }
.theme:hover  { border-color: var(--accent); }

.theme__hint {
  position: absolute;
  top: 50%;
  width: .95rem;
  height: .95rem;
  margin-top: -.475rem;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme__hint--sun  { left: .62rem; }
.theme__hint--moon { right: .62rem; fill: var(--muted); stroke: none; }

.theme__thumb {
  position: absolute;
  top: 50%;
  left: .25rem;
  width: var(--t);
  height: var(--t);
  margin-top: calc(var(--t) / -2);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 16px -4px var(--brand);
  /* dark = switch "on" = thumb on the right */
  transform: translateX(calc(var(--w) - var(--t) - .5rem - 3px));
  transition: transform .55s var(--bounce);
}

[data-theme="light"] .theme__thumb { transform: translateX(0); }

.theme__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  color: #fff;
  fill: #fff;
  transition: transform .55s var(--bounce), opacity .25s ease;
}

.theme__icon--sun {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

[data-theme="dark"] .theme__icon--sun,
:root:not([data-theme]) .theme__icon--sun { opacity: 0; transform: rotate(-110deg) scale(.3); }

[data-theme="light"] .theme__icon--moon { opacity: 0; transform: rotate(110deg) scale(.3); }

/* ---------- Impact effects ---------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.fx .flash {
  position: absolute;
  inset: 0;
  background: var(--flash);
}

.fx .ring {
  position: absolute;
  border: 3px solid var(--ring);
  border-radius: 50%;
}

/* ---------- Theme change: circular reveal (View Transitions) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }

/* no colour fade on top of the circular reveal */
.vt body { transition: none; }
::view-transition-new(root) { z-index: 2; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 56rem) {
  .page { padding-top: calc(5.5rem + env(safe-area-inset-top)); }

  .stage {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas:
      "hero art"
      "reach art";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: 2.5rem;
  }

  .hero  { align-self: end; }
  .reach { align-self: start; gap: 2.25rem; }
  .art   { align-self: center; justify-self: center; width: 100%; margin: 0; }
  .art img { width: auto; max-width: 100%; max-height: min(82vh, 52rem); }

  .name { font-size: .95rem; margin-bottom: 1.1rem; }

  .coming,
  .soon { font-size: min(15.4vw, 15rem); }

  .portfolio { font-size: clamp(1.6rem, 2.7vw, 2.6rem); }

  .theme { top: calc(1.5rem + env(safe-area-inset-top)); right: calc(2rem + env(safe-area-inset-right)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .glyph { transform: none !important; }
  .art.is-float,
  .art.is-in::before { animation: none !important; }
  .lobby__bar::before { transform: scaleX(.53); animation: none; }
  .lobby__bar::after { display: none; }
}