/* ============================================================
   SARJ — Coming Soon  ·  CSS BLOCK
   Paste into:  Store Design  →  (theme card ...)  →  Customize
   version  →  Customize theme tab  →  Customize via CSS.
   Requires the Custom CSS feature (Salla Pro / Plus plan).

   All rules are scoped under .sarj-soon, so nothing else in
   the store is affected. The .sarj-soon block covers the page
   it sits on as a full-screen branded splash.
   ============================================================ */

/* Fonts (also linked in the HTML block; kept here as a fallback).
   If the @import is ignored, the <link> tags in the HTML block
   still load the fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Plus+Jakarta+Sans:wght@300;400;500&display=swap');

.sarj-soon{
  --green:#1B3629; --dk:#0D1A12; --cream:#D6CEC5; --gold:#C4AA85; --w:#F8F6F2;

  position:fixed; inset:0; z-index:999999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem clamp(1.5rem,5vw,4rem); overflow:hidden;

  font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; font-weight:300;
  color:var(--cream);

  /* glow · three concentric rings · base gradient (top → bottom) */
  background:
    radial-gradient(circle at 50% 44%, rgba(196,170,133,.11) 0%, rgba(196,170,133,0) 36%),
    radial-gradient(circle at 50% 44%, transparent 0 219px, rgba(196,170,133,.05) 220px 221px, transparent 222px),
    radial-gradient(circle at 50% 44%, transparent 0 339px, rgba(196,170,133,.045) 340px 341px, transparent 342px),
    radial-gradient(circle at 50% 44%, transparent 0 489px, rgba(196,170,133,.04) 490px 491px, transparent 492px),
    radial-gradient(120% 120% at 50% 30%, #234232 0%, var(--green) 38%, var(--dk) 100%);
}
.sarj-soon *{margin:0; padding:0; box-sizing:border-box;}

/* faint grain */
.sarj-soon::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sarj-soon > *{position:relative; z-index:1;}

.sarj-eyebrow{
  font-size:.62rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold);
  font-weight:500; margin-bottom:clamp(1.6rem,4vw,2.4rem);
  opacity:0; animation:sarjRise 1s ease .2s forwards;
}

.sarj-logo{
  width:clamp(214px,54vw,356px); height:auto; margin-bottom:clamp(1.8rem,4.5vw,2.6rem);
  opacity:0; animation:sarjInk 1.5s cubic-bezier(.2,.7,.2,1) .45s forwards;
}
.sarj-logo path,.sarj-logo polyline{fill:var(--gold);}

.sarj-rule{
  width:0; height:1px; background:var(--gold); opacity:.4; margin-bottom:1.6rem;
  animation:sarjGrow 1.1s ease 1.7s forwards;
}

.sarj-tagline{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(2.3rem,7vw,3.7rem); line-height:1.06; color:var(--w); margin-bottom:1.6rem;
  opacity:0; animation:sarjRise 1.1s ease 1.85s forwards;
}

.sarj-lede{
  font-size:clamp(.82rem,1.9vw,.92rem); line-height:1.95; font-weight:300; max-width:480px;
  color:rgba(214,206,197,.62); margin-bottom:clamp(2rem,4.5vw,2.6rem);
  opacity:0; animation:sarjRise 1.1s ease 2.05s forwards;
}

.sarj-cta{
  display:inline-block; text-decoration:none;
  border:1px solid var(--gold); border-radius:2px; color:var(--gold);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:500;
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; padding:1rem 2rem;
  transition:background .35s,color .35s; opacity:0; animation:sarjRise 1.1s ease 2.25s forwards;
}
.sarj-cta:hover{background:var(--gold); color:var(--green);}

.sarj-foot{
  margin-top:clamp(2rem,5vw,3rem); font-size:.56rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(214,206,197,.32); font-weight:400;
  opacity:0; animation:sarjFade .9s ease 2.5s forwards;
}

@keyframes sarjFade{to{opacity:1;}}
@keyframes sarjRise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
@keyframes sarjGrow{to{width:42px;}}
@keyframes sarjInk{
  0%{opacity:0; transform:translateY(14px) scale(.985); clip-path:inset(0 0 0 100%);}
  55%{opacity:1;}
  100%{opacity:1; transform:translateY(0) scale(1); clip-path:inset(0 0 0 0);}
}

/* accessibility — calm motion */
@media (prefers-reduced-motion:reduce){
  .sarj-soon *{animation:none !important;}
  .sarj-logo{clip-path:none;}
  .sarj-rule{width:42px;}
  .sarj-eyebrow,.sarj-logo,.sarj-tagline,.sarj-lede,.sarj-cta,.sarj-foot{opacity:1 !important; transform:none !important;}
}

/* ── OPTIONAL ──────────────────────────────────────────────
   If your theme header or footer peeks above the splash,
   uncomment and adjust to hide it while in coming-soon mode.
   (Selectors vary by theme — tell me your theme and I'll set
   these precisely.)
   -----------------------------------------------------------
   body { overflow:hidden; }
   header, .s-header, salla-headerو
   footer, .s-footer, salla-footer { display:none !important; }
   ------------------------------------------------------------ */