/* ==========================================================================
   SHEXKITCHEN — Coming soon
   All artwork is inline vector (extracted from the original design SVG),
   scaled with a single unit `--u` so proportions stay identical to the
   1920×1080 artboard on every screen size.
   ========================================================================== */

:root {
  --brown: #645043;
  --beige: #e9e4d2;
  --beige-light: #f4f0e4;
  --beige-dark: #ddd6bf;

  /* Composition is 640 × 566 design units. On a 1920×1080 screen u = 1px,
     exactly matching the artboard. */
  --wf: 94vw;     /* max width share   */
  --hf: 52.4vh;   /* max height share  */
  --u: min(calc(var(--wf) / 640), calc(var(--hf) / 566));

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

@supports (height: 100svh) {
  :root { --hf: 52.4svh; }
}

/* Phones in portrait — use more of the width */
@media (max-width: 600px) and (orientation: portrait) {
  :root { --wf: 92vw; }
}

/* Short landscape screens (phones turned sideways) */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --hf: 84vh; }
  @supports (height: 100svh) { :root { --hf: 84svh; } }
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--beige);
  color: var(--brown);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ BG -- */
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, var(--beige-light) 0%, var(--beige) 55%, var(--beige-dark) 100%);
}

.blob {
  position: absolute; border-radius: 50%;
  background: var(--brown); opacity: .07; filter: blur(70px);
  will-change: transform;
  translate: calc(var(--px, 0) * -30px) calc(var(--py, 0) * -30px);
  transition: translate .8s var(--ease-out);
}
.b1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -14vmax; animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width: 22vmax; height: 22vmax; right: 12vw; top: 8vh; opacity: .045; animation: drift3 22s ease-in-out infinite alternate; }

@keyframes drift1 { to { transform: translate(12vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, -8vh) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-18vw, 30vh) scale(.85); } }

/* Floating "steam / flour" particles */
.dots i {
  position: absolute; bottom: -20px;
  left: calc(var(--d) * 7% + 2%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brown); opacity: 0;
  animation: rise calc(11s + var(--d) * .85s) linear infinite;
  animation-delay: calc(var(--d) * -1.7s);
}
.dots i:nth-child(3n)   { width: 4px;  height: 4px; }
.dots i:nth-child(4n+1) { width: 9px;  height: 9px; filter: blur(1px); }
.dots i:nth-child(5n)   { width: 3px;  height: 3px; }

@keyframes rise {
  0%   { transform: translate(0, 0) scale(1);          opacity: 0; }
  10%  { opacity: .16; }
  50%  { transform: translate(28px, -55vh) scale(.9); }
  85%  { opacity: .1; }
  100% { transform: translate(-16px, -115vh) scale(.6); opacity: 0; }
}

.grain {
  position: absolute; inset: -50%;
  opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
}

/* --------------------------------------------------------------- STAGE -- */
.stage {
  position: relative; z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; place-items: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.composition {
  width: calc(var(--u) * 640);
  display: flex; flex-direction: column; align-items: center;
}

.composition svg { display: block; overflow: visible; fill: var(--brown); }
.composition svg * { transform-box: fill-box; transform-origin: 50% 100%; }

.logo-wrap {
  width: 100%;
  translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px);
  transition: translate .6s var(--ease-out);
}
.logo    { width: 100%; height: calc(var(--u) * 210); animation: float 6s ease-in-out 3.4s infinite; }
.heading { width: 100%; height: calc(var(--u) * 150); }
.tagline { width: 100%; height: calc(var(--u) * 139.19); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -7)); }
}

/* ---- Logo intro: frame draws itself, then the letters pop in ---------- */
.frame-line {
  stroke: var(--brown); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  fill-opacity: 0;
  animation: draw 2s var(--ease-out) .2s forwards;
}
@keyframes draw {
  0%   { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
  65%  { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}
.frame-fill { opacity: 0; animation: fade .6s ease 1.5s forwards; }

.ltr {
  opacity: 0;
  animation: pop .8s var(--ease-back) forwards;
  animation-delay: calc(.55s + var(--i) * .08s);
}
@keyframes pop {
  0%   { opacity: 0; transform: translateY(40%) scale(.6); }
  100% { opacity: 1; transform: none; }
}

/* ---- Heading ------------------------------------------------------- */
.heading .ch,
.tagline .ch {
  opacity: 0;
  animation: rise-in .7s var(--ease-out) forwards;
}
.launching .ch { animation-delay: calc(1.6s + var(--i) * .05s); }
.soon .ch      { animation-delay: calc(2.05s + var(--i) * .07s); }
.tagline .ch   { animation-duration: .6s; animation-delay: calc(2.5s + var(--i) * .018s); }

.soon .bang {
  transform-origin: 50% 100%;
  animation:
    rise-in .7s var(--ease-out) calc(2.05s + var(--i) * .07s) forwards,
    bang 4s var(--ease-out) 3.4s infinite;
}

@keyframes rise-in {
  0%   { opacity: 0; transform: translateY(45%); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes bang {
  0%, 70%, 100% { transform: none; opacity: 1; }
  76% { transform: translateY(-22%) rotate(-10deg); }
  84% { transform: translateY(0) rotate(6deg); }
  90% { transform: rotate(-3deg); }
}
@keyframes fade { to { opacity: 1; } }

/* ---- CTA pill -------------------------------------------------------- */
.cta {
  position: relative;
  width: calc(var(--u) * 252);
  height: calc(var(--u) * 66.67);
  margin-top: 0;
  border-radius: 999px;
  background: var(--brown);
  cursor: pointer;
  user-select: none;
  opacity: 0;
  animation: cta-in .9s var(--ease-back) 3.3s forwards;
  transition: translate .35s var(--ease-back), scale .35s var(--ease-back), box-shadow .35s ease;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(100, 80, 67, .22);
}
.cta-svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.cta-svg .cta-text { fill: var(--beige); }

.cta::after { /* soft pulse ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--brown); opacity: 0;
  animation: ring 2.8s ease-out 4.2s infinite;
  pointer-events: none;
}
.shine {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 2;
  pointer-events: none;
}
.shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
  animation: shine 4.5s ease-in-out 4.4s infinite;
}

.cta:hover  { translate: 0 calc(var(--u) * -4); scale: 1.04; box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 30) rgba(100, 80, 67, .3); }
.cta:active { translate: 0 0; scale: .97; }

.ripple {
  position: absolute; z-index: 2; border-radius: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: rgba(233, 228, 210, .55);
  pointer-events: none;
  animation: ripple .7s ease-out forwards;
}

@keyframes cta-in {
  0%   { opacity: 0; transform: translateY(30%) scale(.7); }
  100% { opacity: 1; transform: none; }
}
@keyframes ring {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.25, 1.6); }
}
@keyframes shine {
  0%, 55% { transform: skewX(-18deg) translateX(0); }
  100%    { transform: skewX(-18deg) translateX(420%); }
}
@keyframes ripple { to { transform: scale(30); opacity: 0; } }

/* ------------------------------------------------------ Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .frame-line { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  .frame-fill, .ltr, .ch, .cta { opacity: 1 !important; }
  .dots, .grain { display: none; }
}