/* E8 Labs — a figure, and a phenomenon on the other side of the glass. */

:root {
  --bg: #0b0e13;
  --ink: #f3f1ee;
  --ink-dim: rgba(243, 241, 238, .66);
  --ink-faint: rgba(243, 241, 238, .40);
  --line: rgba(243, 241, 238, .14);

  --cyan: #5ce1ff;
  --violet: #8b5cff;
  --magenta: #ff4fb8;
  --amber: #ffb35c;
  --coral: #ff7a6b;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.76, 0, .24, 1);

  --aura:
    radial-gradient(55% 30% at 25% 12%, var(--cyan) 0%, transparent 70%),
    radial-gradient(65% 32% at 80% 30%, var(--magenta) 0%, transparent 70%),
    radial-gradient(60% 30% at 20% 55%, var(--amber) 0%, transparent 70%),
    radial-gradient(70% 34% at 78% 72%, var(--violet) 0%, transparent 70%),
    radial-gradient(60% 30% at 30% 92%, var(--coral) 0%, transparent 70%),
    linear-gradient(180deg, #f27fc0, #b388ff 50%, #ff9d7a);

  /* layout, set by main.js */
  --ox: 50vw; --oy: 45vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; }
button { font: inherit; color: inherit; }

/* ============ World ============ */

#world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  transform-origin: var(--ox) var(--oy);
  transition: transform 1.5s var(--ease), filter 1.6s ease;
  will-change: transform, filter;
}

/* fills any edge the artwork doesn't reach (very wide or very tall screens) */
#backdrop {
  position: absolute;
  inset: -10%;
  background: url("assets/creative-studio-hero-768w.webp") center / cover no-repeat;
  filter: blur(48px) brightness(.5) saturate(1.2);
}

/* The artwork and everything pinned to it live in its own 1254 × 1254 pixel space;
   main.js scales and positions the stage to fit the screen. */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1254px;
  height: 1254px;
  transform-origin: 0 0;
  --s: 1;
}
#stage picture, #hero {
  position: absolute;
  inset: 0;
  display: block;
  width: 1254px;
  height: 1254px;
}

/* The phenomenon behind the frosted glass — only its light gets through. */
#beyond, #breath {
  position: absolute;
  left: 387px;
  top: 120px;
  width: 538px;
  height: 637px;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
}
#beyond { filter: blur(11px) saturate(1.2); opacity: .6; }
#breath {
  background:
    radial-gradient(45% 40% at 45% 55%, rgba(255, 90, 190, .55), transparent 70%),
    radial-gradient(35% 35% at 72% 68%, rgba(255, 175, 90, .5), transparent 70%),
    radial-gradient(35% 40% at 70% 22%, rgba(80, 140, 255, .45), transparent 70%);
  animation: breath 11s ease-in-out infinite;
}
@keyframes breath {
  0%, 100% { opacity: 0; }
  50% { opacity: .55; }
}

#glitter {
  position: absolute;
  inset: 0;
  width: 1254px;
  height: 1254px;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---- The door: somewhere else's sky, reflected in the glass ---- */

#portal {
  position: absolute;
  left: 555px;
  top: 238px;
  width: 235px;
  height: 430px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.door-glass {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: .55;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), inset 0 0 24px rgba(255, 255, 255, .12), 0 0 40px rgba(255, 140, 220, .3);
  transition: opacity 1s ease, box-shadow 1s ease;
}
#weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(1.5px) saturate(1.15);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .35));
  mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .35));
}
.sheen {
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 40%, transparent 45%, transparent 60%, rgba(255, 255, 255, .07) 64%, transparent 69%);
  pointer-events: none;
}
#portal:hover .door-glass, #portal:focus-visible .door-glass {
  opacity: .8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 70px rgba(255, 150, 225, .5);
}

/* ---- The watcher ---- */

#dreamer {
  position: absolute;
  left: 355px;
  top: 530px;
  width: 240px;
  height: 265px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.dreamer-glow {
  position: absolute;
  inset: 0;
  clip-path: polygon(95px 8px, 123px 6px, 137px 30px, 137px 70px, 155px 95px, 173px 150px, 205px 195px, 233px 230px, 233px 262px, 25px 262px, 5px 210px, 17px 130px, 33px 70px, 65px 45px, 83px 30px);
  background: linear-gradient(100deg, rgba(92, 170, 255, .5), rgba(255, 90, 190, .55) 60%, rgba(255, 180, 100, .6));
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .8s ease;
}
#dreamer:hover .dreamer-glow, #dreamer:focus-visible .dreamer-glow { opacity: .35; }

.portal-label, .dreamer-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 6px);
  font-size: calc(11px / var(--s));
  letter-spacing: .32em;
  padding-left: .32em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 0, 0, .6);
}
.portal-label { top: calc(-28px / var(--s)); }
.dreamer-label { top: calc(-22px / var(--s)); left: 40%; }
#portal:hover .portal-label, #portal:focus-visible .portal-label,
#dreamer:hover .dreamer-label, #dreamer:focus-visible .dreamer-label { opacity: .9; transform: translate(-50%, 0); }

/* ---- Atmosphere ---- */

.grain, .vignette { position: absolute; inset: 0; pointer-events: none; }
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .04;
  mix-blend-mode: overlay;
}
.vignette {
  background:
    linear-gradient(0deg, rgba(4, 5, 10, .72), rgba(4, 5, 10, .35) 12%, transparent 26%),
    radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, .5));
}


/* ============ Chrome ============ */

header.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(22px, env(safe-area-inset-top)) clamp(18px, 3.2vw, 44px) 0;
  z-index: 40;
  pointer-events: none;
}
header.top > * { pointer-events: auto; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .28em;
  text-decoration: none;
}
.glyph {
  width: 9px; height: 16px;
  border: 2.5px solid transparent;
  border-bottom: 0;
  background: var(--aura) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
nav a {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-dim);
  transition: color .3s ease;
}
nav a:hover, nav a:focus-visible { color: var(--ink); }

.caption {
  position: fixed;
  left: clamp(18px, 3.2vw, 44px);
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.caption.ready { opacity: 1; }
.caption .eyebrow { margin: 0; }
.caption .city {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
}
.caption .detail { font-size: 12.5px; color: var(--ink-dim); letter-spacing: .02em; }

.eyebrow {
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hints {
  position: fixed;
  right: clamp(18px, 3.2vw, 44px);
  bottom: 64px;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  z-index: 10;
  text-align: right;
}
.hints .dot { margin: 0 .5em; }

footer.bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  justify-content: center;
  padding: 0 18px max(20px, env(safe-area-inset-bottom));
  font-size: 11.5px;
  color: var(--ink-faint);
  z-index: 10;
}
footer.bottom a { text-decoration: none; transition: color .3s; }
footer.bottom a:hover { color: var(--ink); }

/* ============ Overlays ============ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
  outline: none;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease .5s, visibility 0s;
}

.sheet {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 170px) 24px 110px;
}
.sheet.wide { max-width: 980px; }

.overlay h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 14px 0 34px;
}
.overlay h2 em {
  font-style: italic;
  background: var(--aura);
  background-size: 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aura 14s ease-in-out infinite alternate;
  padding-right: .06em;
}
.overlay p { font-size: 16.5px; line-height: 1.7; color: var(--ink-dim); font-weight: 300; margin: 0 0 20px; }
.overlay p.eyebrow { font-size: 10.5px; margin: 0; color: var(--ink-faint); font-weight: 400; line-height: 1.4; }
.overlay p.lead { font-size: 18px; color: var(--ink); opacity: .85; }

.line {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(14px);
  transition: opacity .9s ease, filter 1.1s ease, transform 1.1s ease;
}
.overlay.open .line {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition-delay: calc(900ms + var(--i) * 140ms);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  font-size: 13.5px;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, border-color .3s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.btn.primary { background: var(--ink); color: #0b0b0d; border-color: transparent; font-weight: 500; }
.btn.primary:hover { background: #fff; }
.btn.ghost { background: transparent; }

/* ---- The dream ---- */

.dream { background: rgba(8, 7, 12, .42); }
.dream-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.dream-bg i {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: .38;
  animation: float 26s ease-in-out infinite alternate;
}
.dream-bg i:nth-child(1) { background: radial-gradient(closest-side, var(--magenta), transparent); left: -20vmax; top: -25vmax; }
.dream-bg i:nth-child(2) { background: radial-gradient(closest-side, var(--cyan), transparent); right: -30vmax; top: 10vmax; animation-delay: -8s; opacity: .26; }
.dream-bg i:nth-child(3) { background: radial-gradient(closest-side, var(--amber), transparent); left: 10vmax; bottom: -40vmax; animation-delay: -14s; opacity: .24; }
.dream-bg i:nth-child(4) { background: radial-gradient(closest-side, var(--violet), transparent); right: -10vmax; bottom: -30vmax; animation-delay: -20s; }

@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8vmax, 6vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(.95); }
}

.mediums { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mediums li {
  font-size: 12px;
  letter-spacing: .04em;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: rgba(255, 255, 255, .03);
}

/* ---- Behind the glass ---- */

.beyond { background: #0c0a10; }
.beyond-bg {
  position: fixed;
  inset: 0;
  background: var(--aura);
  background-size: 100% 220%;
  animation: aura 22s ease-in-out infinite alternate;
  opacity: .22;
  filter: blur(40px) saturate(1.2);
}
.beyond-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 40%, transparent, #0c0a10 85%);
}

.disciplines {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.disciplines li {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.disciplines h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.disciplines p { font-size: 14px; line-height: 1.6; margin: 0; }

.marble {
  display: block;
  width: 42px; height: 42px;
  border-radius: 50%;
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .45), inset 4px 5px 10px rgba(255, 255, 255, .25), 0 10px 26px -8px var(--c1);
  background:
    radial-gradient(30% 24% at 32% 28%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(80% 60% at 70% 75%, var(--c2), transparent 70%),
    radial-gradient(120% 100% at 30% 30%, var(--c1), #1a1030 90%);
}
.m1 { --c1: var(--cyan); --c2: var(--violet); }
.m2 { --c1: var(--magenta); --c2: var(--amber); }
.m3 { --c1: var(--violet); --c2: var(--cyan); }
.m4 { --c1: var(--amber); --c2: var(--magenta); }
.m5 { --c1: var(--coral); --c2: var(--violet); }
.m6 { --c1: #b8f0ff; --c2: var(--magenta); }

/* ---- Contact ---- */

.contact { background: rgba(8, 8, 10, .55); }
.card {
  margin: 34px 0 0;
  padding: 8px 26px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.card > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.card > div:last-child { border-bottom: 0; }
.card dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.card dd { margin: 0; font-size: 16px; text-align: right; }
.card a { text-decoration: none; }
.card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ States ============ */

body[data-state="studio"] #world {
  filter: blur(9px) saturate(1.9) hue-rotate(-20deg) brightness(.72);
  transform: scale(1.07);
}
body[data-state="disciplines"] #world {
  filter: blur(3px) brightness(1.5);
  transform: scale(6);
}
body[data-state="contact"] #world {
  filter: blur(7px) brightness(.55);
  transform: scale(1.03);
}
body[data-state] .caption,
body[data-state] .hints,
body[data-state] footer.bottom { opacity: 0; transition: opacity .6s ease; }
body[data-state] header.top nav a { color: var(--ink-dim); }

/* ============ Small screens ============ */

@media (max-width: 760px) {
  .hints { display: none; }
  .wide-only { display: none; }
  .caption { bottom: 46px; }
  .caption .city { font-size: 22px; }
  .caption .detail { font-size: 11.5px; }
  footer.bottom { justify-content: flex-end; }
  nav { gap: 16px; }
  nav a { font-size: 12px; }
  .wordmark { font-size: 12px; letter-spacing: .24em; }
  .card > div { flex-direction: column; gap: 4px; }
  .card dd { text-align: left; }
  .overlay p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  #world { transition: filter .6s ease; }
  body[data-state] #world { transform: none; }
  .line { transform: none; }
}