/* TREVV / ENGRAVED. Paper, ink roses, one colossal serif name that turns oil slick under the cursor. */
:root {
  --paper: #f4f2ee;
  --paper-2: #ebe8e2;
  --ink: #0d0c0c;
  --ink-2: #3b3836;
  --mute: #7d7873;
  --line: rgba(13, 12, 12, .14);
  --slick: conic-gradient(from var(--ang, 0deg) at 50% 50%, #ff3fa4, #ffb547, #f4ff6a, #3dffc5, #36b6ff, #8a5cff, #ff3fa4);
  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --gut: clamp(16px, 3.2vw, 44px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.micro { font: 600 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0; }
.faint { opacity: .75; }

/* Grain: one pre-rasterized noise tile instead of a live full-viewport SVG filter. The noise is pure black, so normal blending matches the old multiply exactly. */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .16; transform: translateZ(0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 256px 256px; }

/* Offscreen, hidden or gated sections stop animating. */
.paused, .paused *, .paused *::before, .paused *::after, html.gated body * { animation-play-state: paused !important; }

/* in app browser escape */
.escape { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gut) 10px; background: var(--ink); color: var(--paper); font: 500 12px/1.3 var(--mono); letter-spacing: .06em; }
.escape[hidden] { display: none; }
.escape button { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }

/* hero */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; isolation: isolate; }
.rose { position: absolute; z-index: 0; display: block; overflow: hidden; pointer-events: none; user-select: none; }
.rose img { width: 100%; height: auto; }
.rose-l { left: -5vw; bottom: -4%; width: min(34vw, 520px); }
.rose-r { right: -3vw; bottom: -16%; width: min(27vw, 400px); }
.glint { position: absolute; left: -14%; top: 28%; width: 100%; pointer-events: none; user-select: none; opacity: 0; animation: sweep 7s 1.8s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }
@media (min-width: 700px) { .glint { filter: drop-shadow(0 30px 40px rgba(13, 12, 12, .18)); } }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-12%) rotate(-8deg); } 18% { opacity: .95; } 42% { opacity: 0; transform: translateX(58%) rotate(-8deg); } 100% { opacity: 0; transform: translateX(58%) rotate(-8deg); } }
/* Halo: the blurred slick disc is pre-rendered (blur 70px, saturate 1.2, plus its 210px blur spill), so the GPU only rotates a small texture. */
.halo { position: absolute; left: 50%; bottom: calc(-18% - 210px); width: calc(min(90vw, 980px) + 420px); max-width: none; height: auto; aspect-ratio: 1; transform: translateX(-50%); opacity: .32; z-index: 1; pointer-events: none; animation: spin 10s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.corner { position: absolute; top: calc(var(--gut) * .8); z-index: 6; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.corner.tl { font: 600 15px/1 var(--body); letter-spacing: .01em; text-transform: none; }
.corner.tl { left: var(--gut); }
.corner.tr { right: var(--gut); padding: 8px 12px; border: 1px solid var(--ink); border-radius: 999px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slick); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.5); } }

.name, .fw { margin: 0; font: 900 var(--fs, 28vw)/.8 var(--display); letter-spacing: .01em; white-space: nowrap; user-select: none; }
.name { position: absolute; left: 50%; top: clamp(44px, 9vh, 110px); transform: translateX(-50%); z-index: 2; }
.name span, .fw span { display: block; }
.ink { color: var(--ink); }
/* Oil slick reveal: a soft round lens slides over the type while the slick copy inside it slides the opposite way,
   so the colored letters stay locked to the ink. Both are pure transforms, painted once and moved by the compositor. */
.lens { position: absolute; left: 0; top: 0; width: 44vw; height: 44vw; pointer-events: none; will-change: transform; transform: translate3d(-100vw, 0, 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.85) 35%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.85) 35%, transparent 72%); }
.name .slick, .fw .slick { position: absolute; left: 0; top: 0; width: max-content; will-change: transform; color: transparent; background: var(--slick); -webkit-background-clip: text; background-clip: text; }

.subject { position: absolute; left: 50%; bottom: 0; margin: 0; z-index: 3; aspect-ratio: 1; width: min(64vh, 62vw, 760px); transform: translate(-50%, 9%); }
.portrait { position: relative; will-change: transform; -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }
.portrait img { position: relative; width: 100%; height: auto; user-select: none; filter: drop-shadow(0 30px 40px rgba(13, 12, 12, .18)); }
/* Chromatic split on pointer devices: two tinted silhouettes nudged by transform instead of re-filtering the image every frame. */
.fringe { display: none; }
@media (pointer: fine) {
  .fringe { display: block; position: absolute; inset: 0; will-change: transform;
    -webkit-mask: url(assets/trevv.webp) center / 100% 100% no-repeat; mask: url(assets/trevv.webp) center / 100% 100% no-repeat; }
  .fc { background: rgba(0, 210, 255, .55); }
  .fm { background: rgba(255, 40, 150, .55); }
}

.baseline { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; justify-content: space-between; align-items: end; gap: 16px; pointer-events: none; }
.baseline > * { pointer-events: auto; }
.logo { display: inline-block; flex: none; width: 22px; height: 22px; background: var(--c, currentColor); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.pill .logo { background: #fff; width: 22px; height: 22px; }
.pill.primary:hover .logo { background: var(--c); }
.tag { text-shadow: 0 0 14px var(--paper), 0 0 6px var(--paper), 0 0 2px var(--paper); }
.tag { margin: 0; font: 700 italic clamp(22px, 2.6vw, 40px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.01em; }

.pill { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px 16px 26px; border-radius: 999px; font: 600 15px/1 var(--body); letter-spacing: .01em; border: 1px solid var(--ink); cursor: pointer; transition: transform .4s var(--ease), background .3s, color .3s, box-shadow .3s; }
.pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--ease); }
.pill.primary { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
.pill.primary::before { content: ""; position: absolute; inset: -2px; background: var(--slick); opacity: 0; transition: opacity .35s; z-index: -1; animation: spin 6s linear infinite paused; }
.pill.primary:hover::before, .pill.primary:focus-visible::before { opacity: 1; animation-play-state: running; }
.pill.primary:hover, .pill.primary:focus-visible { color: var(--ink); box-shadow: 0 14px 40px -12px rgba(138, 92, 255, .6); }
.pill:hover svg { transform: translate(2px, -2px); }

/* drop clock */
main { position: relative; z-index: 2; }
.clock { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 12vw, 160px) var(--gut) clamp(60px, 9vw, 120px); display: grid; justify-items: center; text-align: center; gap: 10px; border-top: 1px solid var(--line); }
.petals { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(118vw, 1500px); max-width: none; translate: -50% -50%; opacity: .14; pointer-events: none; animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { translate: -47% -54%; rotate: 3deg; } }
.days { margin: 0; font: 900 clamp(52px, 16vw, 280px)/.85 var(--display); letter-spacing: -.03em; display: flex; align-items: baseline; gap: .12em; }
.days i { font: 700 italic .42em/1 var(--display); color: var(--mute); }
.ppv { margin: 4px 0 0; font: 900 italic clamp(28px, 4.4vw, 60px)/1 var(--display); letter-spacing: -.01em; }
.ppv span { color: var(--mute); font-weight: 700; }
.days span { transition: color .4s; }
.days span.next { color: transparent; background: var(--slick); -webkit-background-clip: text; background-clip: text; }
.count { display: grid; gap: 14px; justify-items: center; margin-top: 18px; }
.count b { color: var(--ink); }
.digits { display: flex; gap: clamp(10px, 2.4vw, 28px); }
.digits div { display: grid; justify-items: center; gap: 6px; min-width: clamp(64px, 11vw, 120px); padding: 16px 10px 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .4); }
.digits b { font: 900 clamp(32px, 5vw, 58px)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.digits span { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* tiers */
.tiers { padding: clamp(60px, 9vw, 120px) var(--gut); border-top: 1px solid var(--line); }
.head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.head h2 { margin: 0; font: 900 clamp(52px, 8.5vw, 132px)/.86 var(--display); letter-spacing: -.035em; }
.head h2 em { font-style: italic; font-weight: 700; }
.head .micro { text-align: right; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .head .micro { text-align: left; } }
.card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px 22px 20px; min-height: 280px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .45); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .3s, color .3s; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--slick); opacity: 0; transition: opacity .4s; }
.card h3 { margin: 0; font: 900 clamp(34px, 3.4vw, 50px)/.92 var(--display); letter-spacing: -.03em; }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 30ch; }
.card .go { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--ink); transition: background .3s, color .3s; }
.card:hover { transform: translateY(-6px); border-color: var(--ink); }
.card:hover::after { opacity: .2; }
.card:hover .go { background: var(--ink); color: var(--paper); }
.card.hot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card.hot p { color: rgba(244, 242, 238, .72); }
.card.hot .micro { color: rgba(244, 242, 238, .6); }
.card.hot .go { border-color: var(--paper); }
.card.hot::after { opacity: .0; mix-blend-mode: screen; }
.card.hot:hover::after { opacity: .45; }
.card.hot:hover .go { background: var(--paper); color: var(--ink); }
/* Phones: compact two by two tiles so the links below are a short scroll away. */
@media (max-width: 560px) {
  .tiers { padding-top: 52px; padding-bottom: 52px; }
  .tiers .head { margin-bottom: 22px; gap: 12px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
  .card { min-height: 0; gap: 8px; padding: 15px 14px 14px; border-radius: 20px; }
  .card .micro { font-size: 9.5px; letter-spacing: .12em; }
  .card h3 { font-size: clamp(21px, 6.1vw, 26px); letter-spacing: -.025em; }
  .card p { font-size: 12.5px; line-height: 1.38; }
  .card .go { gap: 6px; margin-top: 4px; padding: 8px 11px 8px 9px; font-size: 9.5px; letter-spacing: .12em; }
  .card .go .logo { width: 15px; height: 15px; }
}

/* links */
.links { padding: clamp(40px, 6vw, 80px) var(--gut) clamp(60px, 9vw, 120px); max-width: 1180px; margin: 0 auto; }
.links ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; padding: 24px 6px; border-bottom: 1px solid var(--line); position: relative; }
.row .n, .row .l { transition: transform .4s var(--ease); }
.row:hover .n, .row:hover .l { transform: translateX(12px); }
.row .n { font: 500 11px/1 var(--mono); color: var(--mute); letter-spacing: .1em; }
.row .l { font: 900 clamp(32px, 5vw, 64px)/1 var(--display); letter-spacing: -.03em; }
.row .d { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: right; }
.row svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.row:hover .l { color: transparent; background: var(--slick); -webkit-background-clip: text; background-clip: text; }
.row:hover svg { transform: translate(3px, -3px) rotate(0deg); }
.row.lead .l { font-style: italic; }
.row .logo { width: 40px; height: 40px; transition: transform .4s var(--ease); }
.row:hover .logo { transform: translateX(12px) rotate(-8deg) scale(1.08); }
@media (max-width: 560px) { .row { grid-template-columns: 22px 30px minmax(0, 1fr) 22px; gap: 12px; } .row .logo { width: 30px; height: 30px; } .row .d { display: none; } .row .l { font-size: 30px; } }


/* footer */
.foot { position: relative; overflow: hidden; border-top: 1px solid var(--ink); padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px)); }
.fw { position: relative; width: max-content; margin: 8px auto 14px; }
.fine { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 0 var(--gut); font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* mobile composition */
@media (max-width: 699px) {
  .hero { min-height: 460px; max-height: 900px; }
  .name { top: calc(62px + 3svh); }
  .subject { width: min(80vw, 46svh); bottom: 150px; transform: translateX(-50%); }
  .portrait, .glint { -webkit-mask-image: linear-gradient(#000 72%, transparent 97%); mask-image: linear-gradient(#000 72%, transparent 97%); }
  .baseline { flex-direction: column; align-items: stretch; gap: 14px; }
  .baseline .pill { padding: 17px 22px; font-size: 16px; }
  .baseline .pill svg { margin-left: auto; }
  .tag { font-size: 26px; color: var(--ink); }
  .corner.tr { padding: 7px 10px; }
  .halo { bottom: calc(-6% - 210px); width: calc(130vw + 420px); }
  .fringe { -webkit-mask-image: url(assets/trevv-720.webp); mask-image: url(assets/trevv-720.webp); }
}

/* entrance */
@media (max-width: 699px) { .rose-l { left: -16vw; width: 56vw; bottom: 24%; } .rose-r { right: -14vw; width: 42vw; bottom: 18%; } }
/* Rose wipe from the bottom up: the frame rises while the image counter-moves, same look as the old clip-path reveal but compositor only. */
.js .rose { animation: grow 1.8s .25s var(--ease) both; }
.js .rose img { animation: grow-in 1.8s .25s var(--ease) both; }
.js .rose-r, .js .rose-r img { animation-delay: .45s; }
@keyframes grow { from { transform: translate3d(0, 100%, 0); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes grow-in { from { transform: translate3d(0, -100%, 0); } to { transform: none; } }
.js .name { animation: rise 1.1s var(--ease) both; }
.js .subject { animation: lift 1.3s .15s var(--ease) both; }
.js .baseline, .js .corner { animation: fade .9s .55s var(--ease) both; }
@keyframes rise { from { translate: 0 18%; opacity: 0; } }
@keyframes lift { from { opacity: 0; translate: 0 6%; } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}