.intro-active { overflow: hidden; }

.brand-intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050707;
  color: #f5f7f2;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}

.brand-intro.intro-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-grid {
  position: absolute;
  inset: -40%;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 72px 72px;
  transform: perspective(500px) rotateX(66deg) translateY(18%);
  mask-image: radial-gradient(circle,#000 5%,transparent 67%);
  animation: intro-grid-in 3s cubic-bezier(.2,.7,.2,1) both;
}

.intro-glow {
  position: absolute;
  width: min(650px,90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(204,255,61,.15),rgba(204,255,61,.025) 35%,transparent 68%);
  transform: scale(.35);
  opacity: 0;
  animation: intro-glow-in 2.4s .15s ease-out both;
}

.intro-content {
  position: relative;
  width: min(760px,86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intro-logo-wrap {
  width: min(560px,82vw);
  height: 220px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: visible;
  opacity: 0;
  transform: translateY(20px) scale(.94);
  animation: intro-logo-in .8s .18s cubic-bezier(.2,.8,.2,1) forwards;
}

.intro-logo-wrap img {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro-wood-surface {
  position: absolute;
  z-index: 1;
  inset: 10px -36px;
  border-radius: 38px;
  background:
    radial-gradient(ellipse at 24% 20%,rgba(255,218,151,.28),transparent 25%),
    repeating-linear-gradient(2deg,transparent 0 7px,rgba(42,16,4,.19) 8px 10px,transparent 11px 17px),
    repeating-linear-gradient(91deg,#4f260f 0 18px,#713c1a 19px 37px,#4a220d 38px 52px,#8a4d22 53px 69px);
  border: 2px solid rgba(255,203,123,.3);
  box-shadow: inset 0 3px 0 rgba(255,225,175,.22),inset 0 -11px 25px rgba(21,7,1,.68),0 20px 55px rgba(0,0,0,.62);
  opacity: 0;
  transform: perspective(650px) rotateX(8deg) scale(.9);
  animation: wood-surface-in .48s .12s ease-out forwards,wood-surface-away .58s 2.04s ease-in forwards;
}

.intro-carved-mark {
  z-index: 2 !important;
  filter: grayscale(1) sepia(1) saturate(.8) brightness(.52) contrast(1.75) drop-shadow(1px 2px 0 rgba(255,199,112,.5)) drop-shadow(-2px -2px 0 rgba(23,7,0,.85));
  opacity: .92;
  clip-path: inset(0 100% 0 0);
  animation: carve-logo 1.25s .48s cubic-bezier(.22,.72,.18,1) forwards,carved-fade .55s 1.88s ease forwards;
}

.intro-final-mark {
  opacity: 0;
  transform: scale(.985);
  filter: brightness(.72) sepia(.7) drop-shadow(0 12px 35px rgba(0,0,0,.55));
  animation: final-logo-reveal .7s 1.72s cubic-bezier(.2,.8,.2,1) forwards;
}

.carving-sweep {
  position: absolute;
  z-index: 5;
  top: 10%;
  bottom: 10%;
  left: -9%;
  width: 3px;
  opacity: 0;
  background: linear-gradient(transparent,#ffd783 15%,#fff3c8 50%,#d07b2d 85%,transparent);
  box-shadow: 0 0 9px #ffca67,0 0 30px rgba(255,161,56,.78),-10px 0 34px rgba(255,191,91,.3);
  transform: rotate(7deg);
  animation: carving-pass 1.28s .45s cubic-bezier(.3,.02,.16,1) forwards;
}

.wood-dust {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.wood-dust i {
  --x: 10%;
  --y: 50%;
  --dx: 30px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e9ad61;
  box-shadow: 0 0 6px rgba(255,184,91,.9);
  opacity: 0;
  animation: dust-fall .8s .72s ease-out forwards;
}
.wood-dust i:nth-child(2){--x:23%;--y:35%;--dx:-24px;animation-delay:.84s;width:3px;height:3px}
.wood-dust i:nth-child(3){--x:37%;--y:67%;--dx:38px;animation-delay:.96s}
.wood-dust i:nth-child(4){--x:49%;--y:26%;--dx:-31px;animation-delay:1.05s;width:2px;height:2px}
.wood-dust i:nth-child(5){--x:61%;--y:72%;--dx:28px;animation-delay:1.16s}
.wood-dust i:nth-child(6){--x:72%;--y:42%;--dx:-37px;animation-delay:1.26s;width:3px;height:3px}
.wood-dust i:nth-child(7){--x:83%;--y:62%;--dx:33px;animation-delay:1.38s}
.wood-dust i:nth-child(8){--x:91%;--y:31%;--dx:-22px;animation-delay:1.48s;width:2px;height:2px}

.intro-rule {
  width: min(460px,75vw);
  height: 1px;
  margin: 22px 0 24px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.intro-rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,var(--lime),transparent);
  transform: translateX(-105%);
  animation: intro-rule-pass 1.25s .72s ease forwards;
}

.intro-tagline {
  margin: 0;
  color: #dce1dc;
  font: 600 clamp(14px,2vw,21px) "Space Grotesk",sans-serif;
  letter-spacing: .21em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  animation: intro-copy-in .65s 1s ease forwards;
}

.intro-signature {
  margin: 0;
  color: var(--lime);
  font: italic 700 clamp(25px,3vw,38px) "Cormorant Garamond",serif;
  letter-spacing: .035em;
  text-shadow: 0 3px 20px rgba(0,0,0,.75),0 0 24px rgba(204,255,61,.16);
  opacity: 0;
  transform: translateY(10px);
  animation: intro-copy-in .65s 1.32s ease forwards;
}

.intro-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.04);
}

.intro-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lime);
  transform-origin: left;
  animation: intro-progress 3s linear both;
}

.intro-skip {
  position: absolute;
  right: 25px;
  top: 24px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  background: rgba(255,255,255,.04);
  color: #aeb6b1;
  font: 500 11px "DM Sans",sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.intro-skip:hover { color: #fff; border-color: rgba(255,255,255,.35); }

@keyframes intro-logo-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wood-surface-in { to { opacity: 1; transform: perspective(650px) rotateX(0) scale(1); } }
@keyframes wood-surface-away { to { opacity: 0; transform: perspective(650px) rotateX(-4deg) scale(1.08); } }
@keyframes carve-logo { to { clip-path: inset(0 0 0 0); } }
@keyframes carved-fade { to { opacity: 0; filter: grayscale(1) sepia(1) brightness(.9); } }
@keyframes final-logo-reveal { to { opacity: 1; transform: scale(1); filter: brightness(1.1) sepia(0) drop-shadow(0 12px 35px rgba(0,0,0,.55)); } }
@keyframes carving-pass { 0% { left:-9%;opacity:0 } 8%,86% { opacity:1 } 100% { left:108%;opacity:0 } }
@keyframes dust-fall { 0% { opacity:0;transform:translate(0,0) scale(.6) } 22% { opacity:1 } 100% { opacity:0;transform:translate(var(--dx),52px) rotate(160deg) scale(.15) } }
@keyframes intro-rule-pass { to { transform: translateX(105%); } }
@keyframes intro-copy-in { to { opacity: 1; transform: translateY(0); } }
@keyframes intro-glow-in { 40% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
@keyframes intro-grid-in { from { opacity: 0; transform: perspective(500px) rotateX(66deg) translateY(30%) scale(.8); } to { opacity: 1; transform: perspective(500px) rotateX(66deg) translateY(18%) scale(1); } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Photorealistic walnut-carving transition */
.intro-logo-wrap {
  width: min(760px,88vw);
  height: min(400px,48vh);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.72);
}

.intro-logo-wrap::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 23%,rgba(255,223,171,.13) 43%,transparent 61%);
  transform: translateX(-115%);
  animation: real-light-pass 1.2s .55s ease-in-out forwards;
}

.intro-logo-wrap .intro-real-carving {
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.075);
  filter: blur(3px) brightness(.72) saturate(.78);
  animation: real-carving-enter .68s .1s ease-out forwards,real-carving-dissolve .76s 1.7s ease-in forwards;
}

.intro-logo-wrap .intro-final-mark {
  z-index: 4;
  inset: 50% 6% auto;
  width: 88%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(-50%) scale(.965);
  filter: brightness(.7) sepia(.35) drop-shadow(0 14px 38px rgba(0,0,0,.7));
  animation: final-real-reveal .78s 1.82s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes real-carving-enter {
  to { opacity: 1; transform: scale(1.015); filter: blur(0) brightness(1) saturate(.9); }
}

@keyframes real-carving-dissolve {
  to { opacity: 0; transform: scale(1.065); filter: blur(2px) brightness(.42) saturate(.5); }
}

@keyframes final-real-reveal {
  to { opacity: 1; transform: translateY(-50%) scale(1); filter: brightness(1.08) sepia(0) drop-shadow(0 14px 38px rgba(0,0,0,.7)); }
}

@keyframes real-light-pass { to { transform: translateX(115%); } }

/* Ten-second cinematic carving sequence */
.intro-logo-wrap {
  width: min(920px,90vw);
  height: min(520px,58vh);
  background: #261208;
}

.intro-logo-wrap::after {
  background: linear-gradient(112deg,transparent 28%,rgba(255,224,169,.11) 46%,transparent 63%);
  animation: film-light-pass 6.6s .7s ease-in-out forwards;
}

.intro-logo-wrap .intro-blank-walnut {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  filter: brightness(.68) saturate(.76);
  animation: blank-film 9s .08s cubic-bezier(.2,.7,.2,1) forwards;
}

.intro-logo-wrap .intro-real-carving {
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.045);
  filter: brightness(.93) saturate(.82) contrast(1.04);
  animation: carved-film-reveal 6.1s 1.15s cubic-bezier(.38,.01,.18,1) forwards,carved-film-away .9s 8.15s ease-in forwards;
}

.intro-logo-wrap .intro-final-mark {
  z-index: 5;
  width: 84%;
  left: 8%;
  opacity: 0;
  transform: translateY(-50%) scale(.94);
  filter: brightness(.72) sepia(.4) blur(1px) drop-shadow(0 16px 46px rgba(0,0,0,.8));
  animation: colour-logo-film .95s 8.55s cubic-bezier(.2,.8,.2,1) forwards;
}

.real-carving-edge {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: -3%;
  width: 28px;
  opacity: 0;
  background: linear-gradient(90deg,transparent,rgba(255,205,133,.16),rgba(57,23,6,.46),transparent);
  filter: blur(3px);
  box-shadow: 10px 0 20px rgba(46,17,4,.42);
  animation: real-cutting-edge 6.1s 1.15s cubic-bezier(.38,.01,.18,1) forwards;
}

.real-sawdust { position:absolute;z-index:5;inset:0;overflow:hidden;pointer-events:none; }
.real-sawdust i {
  --x: 4%; --y: 40%; --delay: 1.7s; --drift: 40px;
  position:absolute;left:var(--x);top:var(--y);width:4px;height:2px;border-radius:60% 20% 50% 30%;
  background:#d49a4e;box-shadow:0 0 3px rgba(255,218,152,.42);opacity:0;
  animation: real-chip 1.15s var(--delay) ease-out forwards;
}
.real-sawdust i:nth-child(2){--x:13%;--y:62%;--delay:2.2s;--drift:-34px;width:6px}
.real-sawdust i:nth-child(3){--x:23%;--y:31%;--delay:2.75s;--drift:43px}
.real-sawdust i:nth-child(4){--x:34%;--y:70%;--delay:3.3s;--drift:-39px;width:3px}
.real-sawdust i:nth-child(5){--x:45%;--y:45%;--delay:3.9s;--drift:36px}
.real-sawdust i:nth-child(6){--x:56%;--y:25%;--delay:4.45s;--drift:-46px;width:5px}
.real-sawdust i:nth-child(7){--x:66%;--y:67%;--delay:5s;--drift:42px}
.real-sawdust i:nth-child(8){--x:76%;--y:38%;--delay:5.55s;--drift:-31px;width:3px}
.real-sawdust i:nth-child(9){--x:86%;--y:72%;--delay:6.1s;--drift:48px;width:6px}
.real-sawdust i:nth-child(10){--x:94%;--y:28%;--delay:6.65s;--drift:-38px}

.intro-rule i { animation-duration: 1.1s; animation-delay: 8.48s; }
.intro-signature { animation: intro-copy-in .58s 8.82s ease forwards; }
.intro-progress i { animation-duration: 10s; }

@keyframes blank-film {
  0% { opacity:1;transform:scale(1.045);filter:brightness(.55) saturate(.65) }
  8%,84% { opacity:1 }
  72% { transform:scale(1);filter:brightness(.86) saturate(.82) }
  100% { opacity:0;transform:scale(1.025);filter:brightness(.38) saturate(.5) }
}
@keyframes carved-film-reveal {
  0% { clip-path:inset(0 100% 0 0);transform:scale(1.045) }
  100% { clip-path:inset(0 0 0 0);transform:scale(1) }
}
@keyframes carved-film-away { to { opacity:0;transform:scale(1.025);filter:brightness(.4) blur(2px) } }
@keyframes real-cutting-edge {
  0% { left:-3%;opacity:0 }
  3%,94% { opacity:.9 }
  100% { left:101%;opacity:0 }
}
@keyframes real-chip {
  0% { opacity:0;transform:translate(0,0) rotate(0) scale(.5) }
  18% { opacity:.9 }
  100% { opacity:0;transform:translate(var(--drift),60px) rotate(240deg) scale(.18) }
}
@keyframes colour-logo-film { to { opacity:1;transform:translateY(-50%) scale(1);filter:brightness(1.08) sepia(0) blur(0) drop-shadow(0 16px 46px rgba(0,0,0,.8)) } }
@keyframes film-light-pass { to { transform:translateX(115%) } }

/* Full-screen walnut film */
.intro-logo-wrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: #8a4f18;
  opacity: 1;
  transform: none;
  animation: none;
}

.intro-logo-wrap .intro-blank-walnut,
.intro-logo-wrap .intro-real-carving {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-logo-wrap::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,transparent 36%,rgba(12,4,1,.2) 72%,rgba(3,1,0,.68) 100%);
}

.intro-logo-wrap .intro-final-mark {
  inset: 50% auto auto 50%;
  width: min(900px,84vw);
  height: auto;
  transform: translate(-50%,-50%) scale(.94);
  animation-name: colour-logo-fullscreen;
}

.intro-content { z-index: 5; }
.intro-rule { position: fixed; z-index: 12; left: 50%; bottom: 11vh; transform: translateX(-50%); }
.intro-signature { position: fixed; z-index: 12; left: 50%; bottom: 7vh; transform: translateX(-50%); white-space: nowrap; }
.intro-progress,.intro-skip { z-index: 25; }

@keyframes colour-logo-fullscreen {
  to { opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1.08) sepia(0) blur(0) drop-shadow(0 18px 54px rgba(0,0,0,.82)) }
}

@media (max-width:600px) {
  .intro-logo-wrap { width: 100vw; height: 100vh; border-radius: 0; }
  .intro-logo-wrap .intro-real-carving { object-position: center; }
  .intro-logo-wrap .intro-final-mark { width: 94vw; left: 50%; }
  .intro-rule { bottom: 12vh; }
  .intro-signature { bottom: 7.5vh; }
  .intro-tagline { line-height: 1.55; letter-spacing: .14em; }
  .intro-skip { right: 16px; top: 16px; }
}

@media (prefers-reduced-motion:reduce) {
  .intro-grid,.intro-glow,.intro-logo-wrap,.intro-rule i,.intro-tagline,.intro-signature,.intro-wood-surface,.intro-carved-mark,.intro-final-mark,.intro-real-carving,.intro-blank-walnut,.real-carving-edge,.real-sawdust i,.carving-sweep,.wood-dust i { animation-duration: .01ms; animation-delay: 0s; }
  .intro-final-mark { opacity: 1; filter: none; }
  .intro-wood-surface,.intro-carved-mark,.intro-real-carving,.intro-blank-walnut,.real-carving-edge,.real-sawdust,.carving-sweep,.wood-dust { display: none; }
}