@font-face {
  font-family: Heebo;
  src: url("assets/Heebo-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Heebo, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #080706; color: #f3f0e9; }

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 720px;
  min-height: 100svh;
  overflow: hidden;
  background: #080706 url("assets/dragon-scales-background.png") center center / cover no-repeat;
}
.scene__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 42% 67% at 50% 48%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.32) 100%), linear-gradient(180deg, rgba(0,0,0,.18), transparent 24%, transparent 72%, rgba(0,0,0,.25));
}
.wind {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wind::before, .wind::after {
  content: "";
  position: absolute;
  width: 70vw;
  height: 160px;
  left: -30vw;
  top: 50%;
  opacity: 0;
  filter: blur(26px);
  background: radial-gradient(ellipse at center, rgba(188,164,137,.20), rgba(132,116,103,.08) 48%, transparent 74%);
  animation: wind-drift 12s ease-in-out infinite;
}
.wind::after { top: 64%; height: 95px; animation-delay: -5s; animation-duration: 15s; }
.smoke {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: min(48vw, 680px);
  height: min(38vh, 370px);
  pointer-events: none;
  opacity: .25;
  filter: blur(20px);
  background:
    radial-gradient(ellipse 58% 38% at 22% 82%, rgba(130,83,159,.34), transparent 95%),
    radial-gradient(ellipse 39% 26% at 58% 54%, rgba(96,65,139,.27), transparent 95%),
    radial-gradient(ellipse 44% 28% at 83% 78%, rgba(158,92,174,.20), transparent 95%);
}
.smoke--left { left: -6%; animation: smoke-left 16s ease-in-out infinite; }
.smoke--right { right: -6%; animation: smoke-right 19s ease-in-out -7s infinite; }
.smoke--upper { top: -10%; right: -7%; bottom: auto; height: min(43vh, 410px); animation: smoke-upper 21s ease-in-out -10s infinite; }
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(94vw, 850px);
  min-height: 100svh;
  padding: 87px 18px 78px;
}
.logo-wrap {
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 5px;
}
.logo-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10% -19% 10%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(168,104,44,.22), rgba(123,62,25,.10) 43%, transparent 73%);
  filter: blur(20px);
}
.logo {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(250px, min(26vw, 39vh), 360px);
  height: auto;
}
.message { display: grid; justify-items: center; gap: 5px; }
.message p, .social p { margin: 0; }
.message__greeting {
  color: #e6e2da;
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 550;
  line-height: 1.2;
}
.message__patience {
  color: #d9b57d;
  font-size: clamp(23px, 2.35vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  text-shadow: 0 2px 13px rgba(0,0,0,.85);
}
.message h1 {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(34px, 3.8vw, 55px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
}
.social { margin-top: clamp(17px, 2.3vh, 24px); }
.social p {
  color: #d2cdc4;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.5;
}
.social__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.9vw, 25px);
  margin-top: 13px;
  direction: ltr;
}
.social__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #f3f0e9;
  border-radius: 50%;
  transition: color .2s ease, transform .2s ease, filter .2s ease;
}
.social__link[href] { cursor: pointer; }
.social__link[href]:hover, .social__link[href]:focus-visible {
  color: #e4b65c;
  transform: translateY(-3px);
  filter: drop-shadow(0 0 8px rgba(228,182,92,.4));
}
.social__link:focus-visible { outline: 2px solid #e4b65c; outline-offset: 4px; }
.social__link svg { display: block; width: 33px; height: 33px; fill: currentColor; }
.copyright {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 3vw, 48px);
  bottom: clamp(26px, 4vh, 50px);
  margin: 0;
  color: #c4bbb0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
  text-shadow: 0 2px 7px #000;
}

.tape {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 145vw;
  height: clamp(43px, 5.1vw, 72px);
  overflow: hidden;
  pointer-events: none;
  color: #14100a;
  background:
    linear-gradient(90deg, rgba(51,30,5,.26), transparent 34%, transparent 66%, rgba(51,30,5,.26)),
    repeating-linear-gradient(108deg, transparent 0 15px, rgba(255,255,255,.13) 16px 17px, transparent 18px 43px),
    radial-gradient(circle at 13% 37%, rgba(80,43,5,.26) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 72%, rgba(65,34,4,.23) 0 1.5px, transparent 3px),
    linear-gradient(180deg, #f3c94c 0%, #e5ac21 17%, #f5c84b 49%, #c88712 78%, #efbf3b 100%);
  background-size: auto, auto, 47px 31px, 73px 29px, auto;
  border-top: 1px solid rgba(255,225,124,.8);
  border-bottom: 2px solid rgba(96,55,6,.6);
  box-shadow: 0 8px 18px rgba(0,0,0,.72), inset 0 3px 2px rgba(255,255,255,.18), inset 0 -4px 6px rgba(54,28,2,.3);
  transform-origin: center center;
  animation: tape-sway 12s ease-in-out infinite;
}
.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(165deg, transparent 0 3px, rgba(58,38,7,.09) 4px 5px, transparent 6px 13px);
  mix-blend-mode: multiply;
}
.tape__print {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 32px;
  height: 100%;
  width: max-content;
  min-width: 100%;
  padding: 0 30px;
  direction: ltr;
  white-space: nowrap;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-stretch: condensed;
  font-size: clamp(25px, 3vw, 43px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  transform: scaleY(1.03);
}
.tape__print span { display: inline-block; }
.tape--top-back { --angle: -18deg; top: -33px; z-index: 3; animation-delay: -4s; }
.tape--top-front { --angle: -8deg; top: 10px; z-index: 4; }
.tape--bottom-back { --angle: -7deg; bottom: -40px; z-index: 3; animation-delay: -7s; }
.tape--bottom-front { --angle: -15deg; bottom: -82px; z-index: 4; animation-delay: -2s; }

@keyframes tape-sway {
  0%, 58%, 100% { transform: translateX(-50%) translateY(0) rotate(var(--angle)); }
  64% { transform: translateX(-50%) translateY(-5px) rotate(calc(var(--angle) - .7deg)); }
  70% { transform: translateX(-50%) translateY(3px) rotate(calc(var(--angle) + .35deg)); }
  76% { transform: translateX(-50%) translateY(-2px) rotate(calc(var(--angle) - .2deg)); }
}
@keyframes wind-drift {
  0%, 45%, 100% { opacity: 0; transform: translateX(-10vw) translateY(12px) scaleX(.9); }
  60% { opacity: .52; }
  77% { opacity: .14; transform: translateX(105vw) translateY(-22px) scaleX(1.4); }
}
@keyframes smoke-left {
  0%, 100% { opacity: .18; transform: translate(-6%, 11%) scale(1); }
  45% { opacity: .42; transform: translate(12%, -8%) scale(1.18); }
  70% { opacity: .28; transform: translate(21%, -15%) scale(1.28); }
}
@keyframes smoke-right {
  0%, 100% { opacity: .17; transform: translate(7%, 8%) scale(1); }
  42% { opacity: .38; transform: translate(-11%, -6%) scale(1.14); }
  73% { opacity: .24; transform: translate(-19%, -15%) scale(1.24); }
}
@keyframes smoke-upper {
  0%, 100% { opacity: .12; transform: translate(7%, -6%) scale(.95); }
  46% { opacity: .34; transform: translate(-12%, 8%) scale(1.17); }
  76% { opacity: .22; transform: translate(-19%, 15%) scale(1.25); }
}
@media (max-width: 700px) {
  .scene { min-height: 100svh; background-position: 38% center; }
  .content { width: 100%; padding: 105px 18px 110px; }
  .logo { width: min(68vw, 275px); }
  .message { gap: 5px; }
  .message__greeting { font-size: 19px; }
  .message__patience { font-size: clamp(21px, 5.8vw, 28px); }
  .message h1 { font-size: clamp(34px, 8.7vw, 45px); margin-top: 3px; }
  .social { margin-top: 18px; }
  .social p { font-size: 16px; }
  .social__links { gap: 11px; margin-top: 10px; }
  .social__link { width: 45px; height: 45px; }
  .social__link svg { width: 27px; height: 27px; }
  .copyright { left: 15px; bottom: 98px; color: #ded6c9; font-size: 12px; }
  .smoke { width: 75vw; height: 26vh; filter: blur(18px); }
  .tape { width: 190vw; height: 43px; }
  .tape__print { font-size: 25px; gap: 23px; }
  .tape--top-back { top: 14px; }
  .tape--top-front { top: 49px; }
  .tape--bottom-back { --angle: -10deg; bottom: 15px; }
  .tape--bottom-front { --angle: -18deg; bottom: -23px; }
}

@media (max-width: 400px) and (max-height: 760px) {
  .content { padding-top: 86px; padding-bottom: 64px; }
  .logo-wrap { margin-bottom: 2px; }
  .logo { width: min(53vw, 210px); }
  .message__greeting { font-size: 17px; }
  .message__patience { font-size: 21px; }
  .message h1 { font-size: 31px; }
  .social { margin-top: 12px; }
  .social p { font-size: 14px; }
  .social__links { margin-top: 7px; }
  .copyright { left: 12px; bottom: 78px; font-size: 12px; }
  .tape--bottom-back { bottom: -7px; }
  .tape--bottom-front { bottom: -45px; }
}

@media (prefers-reduced-motion: reduce) {
  .social__link { transition: none; }
  .tape, .wind::before, .wind::after, .smoke { animation: none; }
}