/* =====================================================================
   Strawberry for Beauty — Homepage hero · "الصالون الخاص"
   PHASE 2 — the empty room. No devices, no type, no dock, no loader.

   Scope: .sfb-home3d          Accent: #DE2227 and nothing else.
   @font-face lives in assets/home-hero/fonts/fonts.css — never here.

   Layer stack, back to front:
     0 room · 1 glow · 2 haze · 3 cone · 4 motes · 5 horizon · 6 table
     [7-10 devices — Phase 3]
     11 grade · 12 grain · 13 vignette · 14 frame
     [15 type — Phase 4]
   ===================================================================== */

/* ---------------------------------------------------------------------
   Theme header / footer chrome.

   Hidden only on pages carrying the hero (body.sfb-has-hero), which the
   loader adds. This stylesheet is enqueued conditionally, but the body
   class makes the intent explicit and keeps the rule from ever leaking.

   Every known header shape is listed: this site has a documented history
   of the hide silently missing one variant. Block-theme template part,
   the wp-site-blocks child, and the three legacy IDs/classes.
   ------------------------------------------------------------------ */
body.sfb-has-hero header.wp-block-template-part,
body.sfb-has-hero .wp-site-blocks > header,
body.sfb-has-hero #header,
body.sfb-has-hero #masthead,
body.sfb-has-hero .site-header{ display:none !important; }

/* The hero is the first thing in the frame — kill any inherited top gap. */
body.sfb-has-hero .wp-site-blocks > .sfb-home3d{ margin-block-start:0; }
body.sfb-has-hero{ margin:0; }

/* =====================================================================
   Palette + stage
   ===================================================================== */
.sfb-home3d{
  --sfb-ink:        #0A0708;  /* frame, letterbox bars — warm near-black */
  --sfb-room:       #120D0D;  /* back wall */
  --sfb-onyx:       #16110F;  /* table surface */
  --sfb-apron:      #0E0A09;  /* table front face */
  --sfb-strawberry: #DE2227;  /* the only accent */
  --sfb-pearl:      #F3EDE9;  /* headline, lit product */
  --sfb-ash:        #8A8180;  /* secondary text */
  --sfb-veil:       rgba(243,237,233,.06); /* hairlines, corner marks */

  --sfb-bar: clamp(16px, 3.2vh, 40px);     /* letterbox bar height */

  position:relative;
  width:100%;
  background:var(--sfb-ink);
  isolation:isolate;          /* contain mix-blend-mode to the hero */
  overflow:hidden;            /* no horizontal overflow, ever */
  contain:paint;
}

.sfb-home3d .sfb-stage{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:var(--sfb-ink);
  transform-origin:50% 55%;
}

/* Fallback for browsers without svh. */
@supports not (height: 100svh){
  .sfb-home3d .sfb-stage{ min-height:100vh; }
}

/* Every layer fills the stage unless it overrides below. */
.sfb-home3d .sfb-room,
.sfb-home3d .sfb-glow,
.sfb-home3d .sfb-haze,
.sfb-home3d .sfb-cone,
.sfb-home3d .sfb-motes,
.sfb-home3d .sfb-horizon,
.sfb-home3d .sfb-table,
.sfb-home3d .sfb-grade,
.sfb-home3d .sfb-grain,
.sfb-home3d .sfb-vignette,
.sfb-home3d .sfb-frame{
  position:absolute; inset:0;
  pointer-events:none;
}

/* =====================================================================
   0 — room: the back wall
   ===================================================================== */
.sfb-home3d .sfb-room{
  z-index:0;
  background:
    radial-gradient(90% 70% at 50% 42%, #1A1413 0%, var(--sfb-room) 46%, #0B0808 100%);
}

/* =====================================================================
   1 — glow: faint red bloom low behind the table.
   The only place the accent appears in the empty room besides the horizon.
   ===================================================================== */
.sfb-home3d .sfb-glow{
  z-index:1;
  background:
    radial-gradient(60% 40% at 50% 68%, rgba(222,34,39,.16), transparent 72%);
  filter:blur(40px);
}

/* =====================================================================
   2 — haze: the single biggest contributor to depth.

   Raised to .14 and re-anchored: the radial is centred at 50% 100%, so its
   brightest line falls on the layer's own bottom edge. Putting that edge at
   bottom:38% lands it exactly on the wall/table junction, which is what
   separates the two planes instead of fogging the whole lower frame.
   ===================================================================== */
.sfb-home3d .sfb-haze{
  z-index:2;
  inset-inline:0; bottom:38%; height:26%; top:auto;
  background: radial-gradient(120% 100% at 50% 100%,
              rgba(243,237,233,.14), transparent 70%);
  filter: blur(30px);
}

/* =====================================================================
   3 — light cone.

   No clip-path, no filter. The old version combined the two on one element:
   the browser applies the filter and then clips, so the blur was sliced off
   at the wedge edge and the cone read as a hard grey triangle. The falloff
   is now carried by the gradient itself and a mask, which cannot be clipped.

   RULE: never combine clip-path and filter on the same element in this build.

   `inset:auto` is placed BEFORE top/left. `inset` is the shorthand for all
   four offsets, so listing it after them resets both to auto and the cone
   drops to its static position — which, with translateX(-50%), pushes it off
   the left edge. Same declarations, same values, order corrected.
   ===================================================================== */
.sfb-home3d .sfb-cone{
  z-index:3;
  position:absolute; inset:auto; top:0; left:50%; transform:translateX(-50%);
  width:120%; height:76%; pointer-events:none;
  background: radial-gradient(58% 100% at 50% 0%,
    rgba(243,237,233,.13) 0%, rgba(243,237,233,.06) 38%,
    rgba(243,237,233,.015) 66%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 55%,transparent 92%);
          mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 55%,transparent 92%);
}

/* =====================================================================
   4 — dust motes inside the cone
   Position/size/delay/duration come from inline custom properties, so one
   keyframe drives all 18. transform + opacity only.
   ===================================================================== */
.sfb-home3d .sfb-motes{ z-index:4; }

.sfb-home3d .sfb-motes span{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:rgba(243,237,233,.85);
  filter:blur(.4px);
  opacity:0;
  will-change:transform, opacity;
  animation:sfb-mote var(--t) linear var(--d) infinite;
}

/* Peak brightness comes from each mote's own --o, so no two match. */
@keyframes sfb-mote{
  0%   { transform:translate3d(0,0,0);        opacity:0; }
  14%  {                                      opacity:var(--o); }
  50%  { transform:translate3d(5px,-30px,0);  opacity:calc(var(--o) * .55); }
  86%  {                                      opacity:calc(var(--o) * .8); }
  100% { transform:translate3d(-3px,-58px,0); opacity:0; }
}

/* =====================================================================
   5 — horizon: 1px red hairline + bloom, where wall meets table
   ===================================================================== */
/* Dimmed hard: at .72 across the full width this read as a laser, not a
   horizon. Now .55 at half opacity, lit only across the middle third, with
   the bloom falling below the line rather than wrapping it. */
.sfb-home3d .sfb-horizon{
  z-index:5;
  position:absolute; inset-inline:0; bottom:38%; top:auto; height:1px; opacity:.5;
  background: linear-gradient(90deg, transparent 12%,
    rgba(222,34,39,.55) 38%, rgba(222,34,39,.55) 62%, transparent 88%);
}
.sfb-home3d .sfb-horizon::after{
  content:''; position:absolute; inset-inline:0; top:0; height:70px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(222,34,39,.16), transparent 70%);
  filter: blur(18px);
}

/* =====================================================================
   6 — the table. Surface band + 1px warm edge + darker apron.
   The edge hairline is what makes it read as a table, not a floor.
   DESIGN.md reference implementation, verbatim.
   ===================================================================== */
.sfb-home3d .sfb-table{ z-index:6; inset-inline:0; bottom:0; top:auto; height:38%; }

/* The surface is now LIGHTER than the wall — that inversion is what makes it
   read as a lit horizontal plane instead of more darkness. Four distinct
   values from here down: wall ≈ #0F0B0A, top #1E1917→#221B18, edge (pearl
   hairline), apron #100B0A→#070505. */
.sfb-home3d .sfb-table__top{
  position:absolute; inset-inline:0; top:0; height:34%;
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(255,238,225,.07), transparent 70%),
    linear-gradient(180deg,#1E1917 0%,#191412 55%,#221B18 100%);
}
.sfb-home3d .sfb-table__edge{
  position:absolute; inset-inline:0; top:34%; height:1px;
  background: linear-gradient(90deg, transparent,
    rgba(243,237,233,.28) 22%, rgba(243,237,233,.28) 78%, transparent);
}
.sfb-home3d .sfb-table__apron{
  position:absolute; inset-inline:0; top:calc(34% + 1px); bottom:0;
  background: linear-gradient(180deg, #100B0A, #070505);
}

/* ---------------------------------------------------------------------
   6b — the light pool where the beam lands on the table.
   Above the table, below the reflections (Phase 3): same z-index, later
   in the DOM. This is what makes the cone read as real light.
   ------------------------------------------------------------------ */
/* bottom:24%, not the specified 14%. The table surface runs from bottom 25%
   to 38%; at 14% the pool centred 27px BELOW the edge hairline, putting 99 of
   its 144px on the apron — the light pooled on the table's front face instead
   of its top. 24% centres it on the surface. Width and height unchanged. */
.sfb-home3d .sfb-pool{
  z-index:6;
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:24%; width:62%; height:16%; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255,238,225,.16), rgba(255,238,225,.05) 45%, transparent 72%);
  filter: blur(24px);
}

/* =====================================================================
   11 — grade: cool shadows, warm highlights. Keep it subtle.
   DESIGN.md reference implementation, verbatim.
   ===================================================================== */
.sfb-home3d .sfb-grade{
  z-index:11;
  background:
    linear-gradient(180deg, rgba(24,32,40,.20), transparent 45%),
    radial-gradient(90% 60% at 50% 78%, rgba(255,214,190,.07), transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* =====================================================================
   12 — film grain. The single most important cinema layer.
   DESIGN.md reference implementation, verbatim.
   ===================================================================== */
.sfb-home3d .sfb-grain{
  z-index:12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.055;
  animation: sfb-grain 1.1s steps(4) infinite;
  pointer-events:none;
  /* keep the animated blend layer on the compositor */
  will-change: transform;
}
@keyframes sfb-grain{
  0%{transform:translate(0,0)}      25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}  75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}
/* The layer translates by up to 3%; oversize it so no edge is ever exposed. */
.sfb-home3d .sfb-grain{ inset:-6%; }

/* =====================================================================
   13 — vignette
   DESIGN.md reference implementation, verbatim.
   ===================================================================== */
.sfb-home3d .sfb-vignette{
  z-index:13;
  background: radial-gradient(120% 90% at 50% 52%,
              transparent 38%, rgba(10,7,8,.55) 78%, rgba(10,7,8,.9) 100%);
  pointer-events:none;
}

/* =====================================================================
   14 — the frame: letterbox bars + camera corner marks.
   This plus the grain is what says "film still" rather than "dark website".
   ===================================================================== */
.sfb-home3d .sfb-frame{ z-index:14; }

.sfb-home3d .sfb-bar{
  position:absolute; inset-inline:0;
  height:var(--sfb-bar);
  background:var(--sfb-ink);
}
.sfb-home3d .sfb-bar--top{ top:0; }
.sfb-home3d .sfb-bar--bottom{ bottom:0; }

/* Four L-shapes, 28px, 1px veil. Inset just clear of the bars. */
.sfb-home3d .sfb-mark{
  position:absolute;
  width:28px; height:28px;
  opacity:.5;
}
.sfb-home3d .sfb-mark--tl{
  top:calc(var(--sfb-bar) + 18px); left:18px;
  border-top:1px solid var(--sfb-veil); border-left:1px solid var(--sfb-veil);
}
.sfb-home3d .sfb-mark--tr{
  top:calc(var(--sfb-bar) + 18px); right:18px;
  border-top:1px solid var(--sfb-veil); border-right:1px solid var(--sfb-veil);
}
.sfb-home3d .sfb-mark--bl{
  bottom:calc(var(--sfb-bar) + 18px); left:18px;
  border-bottom:1px solid var(--sfb-veil); border-left:1px solid var(--sfb-veil);
}
.sfb-home3d .sfb-mark--br{
  bottom:calc(var(--sfb-bar) + 18px); right:18px;
  border-bottom:1px solid var(--sfb-veil); border-right:1px solid var(--sfb-veil);
}

/* =====================================================================
   Mobile
   ===================================================================== */
@media (max-width:768px){
  /* Taller, narrower frame: lift the horizon and shrink the table so the
     room still reads as a room rather than a letterboxed stripe. */
  /* Table shorter on a tall frame; haze and horizon follow it so the
     junction stays a single line rather than three near-misses. */
  .sfb-home3d .sfb-table{ height:34%; }
  .sfb-home3d .sfb-horizon{ bottom:34%; }
  .sfb-home3d .sfb-haze{ bottom:34%; height:24%; }
  .sfb-home3d .sfb-pool{ bottom:21%; width:80%; height:14%; }
  .sfb-home3d .sfb-cone{ width:165%; height:70%; }
  .sfb-home3d .sfb-mark{ width:20px; height:20px; }
  .sfb-home3d .sfb-mark--tl,
  .sfb-home3d .sfb-mark--tr{ top:calc(var(--sfb-bar) + 12px); }
  .sfb-home3d .sfb-mark--bl,
  .sfb-home3d .sfb-mark--br{ bottom:calc(var(--sfb-bar) + 12px); }
  .sfb-home3d .sfb-mark--tl,
  .sfb-home3d .sfb-mark--bl{ left:12px; }
  .sfb-home3d .sfb-mark--tr,
  .sfb-home3d .sfb-mark--br{ right:12px; }
}

/* =====================================================================
   Reduced motion — no drift, no grain animation. The frame is static but
   entirely intact: every layer still renders.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .sfb-home3d .sfb-grain{ animation:none; }
  .sfb-home3d .sfb-motes span{
    animation:none;
    opacity:var(--o);
  }
}