/* Dark Elven Studios: one page. Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt). No third-party requests. */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --void: #030304;      /* night inside the walls */
  --dusk: #17121f;      /* stone in shadow */
  --silver: #d8d2e4;    /* moonlit text */
  --ash: #8c8698;       /* quiet text */
  --ember: #d98a3d;     /* fire somewhere below */
  --ember-hot: #f2c27a;
  --serif-d: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif-b: "Cormorant Garamond", Garamond, Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--void);
  background-image: radial-gradient(120% 80% at 50% 105%, #2a1a14 0%, rgba(42, 26, 20, 0) 55%),
                    radial-gradient(90% 70% at 50% 20%, #0e0c12 0%, var(--void) 70%);
  color: var(--silver);
  font-family: var(--serif-b);
  font-size: 18px;
  line-height: 1.55;
  min-height: 100svh;

  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.fog { position: fixed; inset: -20% -40%; pointer-events: none; z-index: 2; opacity: .9; will-change: transform; }
.fog-a { background: radial-gradient(40% 18% at 30% 78%, rgba(160, 150, 180, .13), transparent 70%),
                     radial-gradient(35% 14% at 72% 86%, rgba(160, 150, 180, .11), transparent 70%);
         animation: drift 46s ease-in-out infinite alternate; }
.fog-b { background: radial-gradient(45% 16% at 60% 70%, rgba(140, 130, 160, .11), transparent 70%),
                     radial-gradient(30% 12% at 20% 92%, rgba(217, 138, 61, .05), transparent 70%);
         animation: drift 63s ease-in-out -20s infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -2%, 0); } }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* the stage: a pointed arch drawn in the dark, the name inside it, the way in at its foot */
.stage {
  position: relative; z-index: 4;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  justify-items: center;
  padding: 48px 16px 96px;
  text-align: center;
}
.arch {
  position: absolute; left: 50%; bottom: 0;
  height: min(92svh, 860px); width: auto; max-width: 100vw;
  transform: translateX(-50%);
}
.arch-line { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 3.2s cubic-bezier(.6, .05, .25, 1) .2s forwards; }
.arch-line.inner { animation-delay: .7s; }
.arch-line.keystone { stroke-dasharray: 80; stroke-dashoffset: 80; animation-delay: 2.6s; animation-duration: 1.2s; }
.arch-fill { opacity: 0; animation: glow 4s ease 1.6s forwards, breathe 7s ease-in-out 5.6s infinite alternate; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow { to { opacity: 1; } }
@keyframes breathe { from { opacity: 1; } to { opacity: .65; } }

.mark { grid-row: 2; margin-top: min(18svh, 160px); }
.mark h1 { margin: 0; font-weight: 400; line-height: 1; }
.mark-top {
  display: block;
  font-family: var(--serif-d); font-weight: 600;
  font-size: clamp(38px, 8.4vw, 92px);
  letter-spacing: .14em; margin-right: -.14em;  /* keeps the tracked word optically centred */
  background: linear-gradient(180deg, #f1ecf7 0%, #c7bfd6 55%, #8a8199 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(216, 210, 228, .12));
  opacity: 0; animation: rise 1.6s ease 1.1s forwards;
}
.mark-sub {
  display: block; margin-top: .6em;
  font-family: var(--serif-d); font-weight: 600;   /* owner 10-20: the subtitle must read clearly, phone included */
  font-size: clamp(17px, 2.6vw, 26px);
  letter-spacing: .5em; margin-right: -.5em;
  color: #aca6b9;
  opacity: 0; animation: rise 1.6s ease 1.5s forwards;
}
.line {
  grid-row: 3; margin: 2.2em 0 0; max-width: 32ch;
  font-style: italic; font-size: clamp(20px, 2.6vw, 27px); color: #bdb6cb;
  opacity: 0; animation: rise 1.8s ease 2.1s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.play {
  grid-row: 4; margin-top: 2.6em;
  position: relative; display: inline-grid; place-items: center;
  min-width: 220px; height: 68px; padding: 0 44px; place-content: center; row-gap: 4px;
  color: var(--silver); text-decoration: none;
  font-family: var(--serif-d); font-weight: 600; font-size: 19px; letter-spacing: .5em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background: linear-gradient(180deg, rgba(217, 138, 61, .10), rgba(217, 138, 61, .02));
  transition: color .35s ease, background .35s ease;
  opacity: 0; animation: rise 1.6s ease 2.7s forwards;
  -webkit-tap-highlight-color: transparent;
}
.play-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.play-frame polygon { fill: none; stroke: url(#playStroke); stroke-width: 1.2; }
.play::after { /* heat behind the threshold */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 50% 120%, rgba(242, 194, 122, .35), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.play-text { position: relative; margin-right: -.5em; }
.play:hover, .play:focus-visible { color: #fff7ea; background: linear-gradient(180deg, rgba(217, 138, 61, .30), rgba(217, 138, 61, .08)); }
.play:hover::after, .play:focus-visible::after { opacity: 1; }
.play:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 6px; }
.play:active { transform: translateY(1px); }
.play-chan { position: relative; font-size: 11px; line-height: 1; letter-spacing: .46em; margin-right: -.46em; color: var(--ember-hot); opacity: .85; }
.play-text { line-height: 1; }
/* Latest: the newest build, smaller and quieter than Stable so nobody lands on it by accident */
.latest { grid-row: 5; margin-top: 1.3em; display: inline-grid; justify-items: center; row-gap: 6px; text-decoration: none; color: var(--silver);
  opacity: 0; animation: rise 1.6s ease 2.9s forwards; -webkit-tap-highlight-color: transparent; }
.latest-btn { position: relative; isolation: isolate; display: inline-grid; place-items: center; height: 42px; padding: 0 24px 0 calc(24px + .32em);
  font-family: var(--serif-d); font-weight: 600; font-size: 13px; letter-spacing: .32em; color: #cfc8dc;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  background: rgba(216, 210, 228, .34); transition: background .3s ease, color .3s ease; }
.latest-btn::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #0c0a11;
  clip-path: polygon(9.6px 0, calc(100% - 9.6px) 0, 100% 50%, calc(100% - 9.6px) 100%, 9.6px 100%, 0 50%); }
.latest-note { font-style: italic; font-size: 15px; line-height: 1.2; color: var(--ash); }
.latest:hover .latest-btn, .latest:focus-visible .latest-btn { background: rgba(242, 194, 122, .75); color: #fff7ea; }
.latest:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 6px; }
.play-note { grid-row: 6; margin: 1.1em 0 0; max-width: 30ch; font-size: 15px; color: var(--ash); opacity: 0; animation: rise 1.6s ease 3.1s forwards; }

.gallery { position: relative; z-index: 4; max-width: 1240px; margin: 0 auto; padding: 0 16px 80px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.gallery[hidden] { display: none; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border: 1px solid rgba(216, 210, 228, .14); }
.gallery figcaption { margin-top: 8px; font-style: italic; color: var(--ash); font-size: 16px; }

.foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; text-align: center; padding: 0 16px 24px; }
.gallery:not([hidden]) ~ .foot { position: relative; }
.foot p { margin: 0; font-size: 15px; color: #6f6a7b; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .stage { padding-top: 32px; padding-bottom: 88px; }
  .mark { margin-top: 20svh; }
  .play { min-width: 200px; height: 64px; }
  .arch { height: 80svh; }
}

@media (prefers-reduced-motion: reduce) {
  .fog { animation: none; }
  .arch-line { animation: none; stroke-dashoffset: 0; }
  .arch-fill, .mark-top, .mark-sub, .line, .play, .latest, .play-note { animation: none; opacity: 1; }
}