/* =========================
   Base styles (cleaned)
   ========================= */
:root{
  --bg-1:#0b1220; --bg-2:#1a2240; --text:#eaf0ff; --muted:#a4b1d4; --line:rgba(255,255,255,.10);
  --violet:#6d5afc; --violet-2:#8b5cf6; --blue:#60a5fa; --cyan:#38bdf8;
  --glass:rgba(255,255,255,.08); --card:rgba(255,255,255,.06); --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:16px; --r-lg:22px;
}

*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:linear-gradient(90deg,var(--bg-1),var(--bg-2));
  background-size:200% 200%;
  animation:bg 24s ease-in-out infinite;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100svh; /* sticky footer base */
}
@keyframes bg{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(1100px,92vw); margin-inline:auto }

/* Optional subtle paper texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(255,255,255,.02), transparent 60%),
    radial-gradient(1000px 600px at 90% 100%, rgba(255,255,255,.02), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  mix-blend-mode:soft-light;
}

/* Accessibility */
:focus-visible{ outline:2px solid #8bd3ff; outline-offset:2px }

/* =========================
   Header / Nav
   ========================= */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.2) blur(10px);
  background:color-mix(in srgb, var(--glass) 85%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; transition:padding .25s ease }
header.scrolled .nav{ padding:10px 0 }

.brand{ display:flex; gap:10px; align-items:center; font-weight:800 }
.brand-text{ font-weight:800; letter-spacing:.3px }
.logo{
  width:46px; height:36px; border-radius:10px;
  background:
    radial-gradient(140% 140% at 30% 20%, var(--violet-2), transparent 60%),
    radial-gradient(120% 120% at 80% 20%, var(--cyan), transparent 55%),
    linear-gradient(160deg,#0ea5e9,#6366f1);
  box-shadow: inset 0 0 20px rgba(255,255,255,.25), var(--shadow);
}

/* Optional explicit brand link/logo helpers */
.brand-link{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text) }
.brand-logo{ width:65px; height:60px; }

nav ul{ display:flex; list-style:none; gap:22px; margin:0; padding:0 }
nav a{ color:var(--muted); font-weight:600 }
nav a:hover{ color:var(--text) }

/* Buttons / Pills */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(180deg,var(--violet-2),var(--violet)); color:#0d0f1a;
  box-shadow:var(--shadow); border:0; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line) }

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass);
  color:var(--text); font-weight:700; cursor:pointer;
}

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:6px 10px; border-radius:999px;
  background:rgba(109,90,252,.12); border:1px solid rgba(109,90,252,.35);
  color:#cdd1ff; font-weight:700;
}

/* Motion toggle: reduce all non-essential motion */
.reduced-motion, .reduced-motion *{ animation:none !important; transition:none !important }

/* =========================
   Hero
   ========================= */
.hero{ position:relative; z-index:1; padding:4px 0 36px }
.grid{ display:grid; grid-template-columns:1.25fr 1.05fr; gap:36px; align-items:center }
.headline{
  font-family:"Playfair Display",ui-serif,Georgia; font-weight:700;
  font-size:clamp(32px,4.6vw,58px); line-height:1.05;
  background:linear-gradient(90deg,#fff,#c7d2fe 40%,#93c5fd 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-wrap:balance;
}
.sub{ margin-top:10px; color:var(--muted); font-size:clamp(14px,1.8vw,18px) }
.cta{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap }

.book-mock{
  width:100%; aspect-ratio:4/5; border-radius:var(--r-lg);
  background:conic-gradient(from 210deg at 70% 30%,#1b2352,#15314d,#0a1730);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  position:relative; overflow:hidden; animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.book-mock::before{
  content:""; position:absolute; inset:0; width:22px; left:0;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0));
}
.cover-label{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:28px; color:#dbeafe; z-index:2 }
.cover-title{ font:700 clamp(22px,3.6vw,42px) "Playfair Display",ui-serif }
.cover-sub{ margin-top:10px; font-weight:600; color:#a4b1d4 }

.hero-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(2px); opacity:0; transition:opacity .6s ease, filter 1.2s ease;
}
.cover-overlay{ position:absolute; inset:0; z-index:3; background:transparent }
/* harden drag/save */
.hero-cover img, .qr img{ user-select:none; pointer-events:none }

/* =========================
   Sections & content blocks
   ========================= */
section{ padding:70px 0; position:relative; z-index:1 }
.section-h{ font:800 clamp(18px,3.2vw,26px) Inter,ui-sans-serif; letter-spacing:.4px; margin:0 0 12px; color:#e6ecff }
.section-sub{ color:var(--muted); margin-bottom:20px }
.bullets{ line-height:1.9; color:#cbd5e1; padding-left:18px }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{ background:var(--card); border:1px solid var(--line); padding:18px; border-radius:var(--r); box-shadow:var(--shadow); min-height:110px }
.card h4{ margin:6px 0 6px; font-size:18px }
.card p{ margin:0; color:var(--muted); font-size:14px }

.book-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:28px }
.order-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start }

/* Slider */
.slider{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#0f1629; box-shadow:var(--shadow) }
.slider-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.slider-track::-webkit-scrollbar{ display:none }
.slide{
  min-width:100%; aspect-ratio:16/10; display:grid; place-items:center; scroll-snap-align:start;
  background:radial-gradient(120% 140% at 30% 20%,#1e293b,#0b1220); color:#9fb5ff; font-weight:800; font-size:clamp(16px,3vw,28px); letter-spacing:.4px;
}
.slider .ctrl{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none }
.slider button{
  pointer-events:auto; background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.18); color:#e6hjff;
  padding:10px 14px; border-radius:12px; margin:0 10px; cursor:pointer; backdrop-filter:blur(6px);
}
.slider button:hover{ background:rgba(255,255,255,.18) }


.shatter{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--r-lg);
  overflow:hidden; background:linear-gradient(135deg,#0d1b2a,#1b2a4e);
  border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
}
.shatter .hint{
  position:absolute; bottom:10px; right:12px;
  background:rgba(0,0,0,.4); padding:6px 10px; border-radius:999px; font-size:12px; color:#cbd5e1;
}
.piece{ position:absolute; will-change:transform,opacity; transition:transform 900ms cubic-bezier(.2,.65,.2,1), opacity 900ms }
.shatter.broken .piece{ filter:blur(1px); opacity:.9 }
/* Forms */
.form{ background:var(--card); border:1px solid var(--line); padding:18px; border-radius:var(--r-lg); box-shadow:var(--shadow) }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.row+.row{ margin-top:12px }
label{ font-size:13px; color:#c9d3f2; display:block; margin-bottom:6px }
.input, textarea, select{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:rgba(26,34,81,.9); color:var(--text); outline:none;
}
.input:focus, textarea:focus, select:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--violet-2) 55%, transparent); border-color:#9aa9ff }
.price{
  display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:12px;
  border:1px dashed rgba(255,255,255,.18); border-radius:12px; background:rgba(109,90,252,.08);
}
.form-actions{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }
.toast{ opacity:0; transform:translateY(6px); transition:.25s; margin:12px 2px 0; color:#9ae6b4; font-weight:700 }
.fine{ margin:12px 2px 0; color:#cbd5e1; font-size:13px }

/* Contact */
.contact-links{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 16px;
}
.pill-link{
  display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); color:var(--text); font-weight:700;
}
.contact-links .note{ color:var(--muted); font-size:13px }

.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start }
.qr{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; display:grid; place-items:center }

/* Contact form (if used) */
.contact-form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow);
  display:grid; gap:12px;
}
.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.contact-form .row.single{ grid-template-columns:1fr }
.contact-form label{ font-size:13px; color:#c9d3f2; display:block; margin-bottom:6px }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(3,7,18,.45); color:var(--text); outline:none;
}
.contact-form textarea{ min-height:120px; resize:vertical }
.contact-form .actions{ display:flex; gap:12px; flex-wrap:wrap }
.msg-toast{ opacity:0; transform:translateY(6px); transition:.25s; margin:4px 2px 0; color:#9ae6b4; font-weight:700; font-size:14px }

/* Footer (minimal + pinned) */
main{ flex:1 0 auto }
footer{ margin-top:auto; position:relative; z-index:2; padding:10px 0 60px; color:#fff; text-align:center }

/* Banner */
.banner{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 12px; background:rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.35); color:#dfe3ff; border-radius:12px;
}

/* Letter rain canvas always below */
#letterRain{ position:fixed; inset:0; z-index:0; pointer-events:none }

/* Go-to-top button (bottom-left) */
.to-top-fab{
  position:fixed; left:14px; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:60; width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.12); color:var(--text);
  border:1px solid var(--line); backdrop-filter:blur(6px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease; cursor:pointer;
}
.to-top-fab svg{ width:18px; height:18px }
.to-top-fab.show{ opacity:1; transform:translateY(0) }
.to-top-fab.kb-hide{ opacity:0 !important; transform:translateY(80px) !important; pointer-events:none !important }

@media (max-width:960px){
  .grid, .book-grid, .order-grid{ grid-template-columns:1fr }
  nav ul{ display:none }
  .cards{ grid-template-columns:1fr }
  .btn{ width:100% }
  .row{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr }
}
@media (max-width:380px){
  .to-top-fab{ left:10px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:42px; height:42px }
}

@media print{ .to-top-fab{ display:none !important } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }
/* --- Triangle shatter (SVG-based, no seams) --- */
.shatter {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg,#0d1b2a,#1b2a4e);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.shatter .hint{
  position:absolute; bottom:10px; right:12px;
  background:rgba(0,0,0,.4); padding:6px 10px; border-radius:999px;
  font-size:12px; color:#cbd5e1; z-index: 5;
}

/* SVG takes full box */
.shatter svg {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* Base image sits under shards to hide gaps (so no white slivers) */
.shatter .base {
  position:absolute; inset:0;
  width:100%; height:100%;
  background-size:cover; background-position:center;
  transform: scale(1.001); /* hairline bleed */
  filter: none;
  z-index: 0;
}

/* Blue polygon overlay visible only when INTACT */
.shatter .overlay {
  position:absolute; inset:0; z-index: 2;
  pointer-events:none;
  mix-blend-mode: soft-light; /* gentle, modern feel */
  opacity: 0.9;
}
.shatter.broken .overlay { opacity: 0; }

/* The triangle pieces (SVG <g> wrappers) */
.shatter .tri-piece {
  will-change: transform, opacity;
  transform-origin: center;
  transition: transform 900ms cubic-bezier(.2,.65,.2,1), opacity 900ms;
}

/* Broken state scatters triangles */
.shatter.broken .tri-piece {
  filter: blur(0.4px);
  opacity: .95;
}

/* Nice GPU hint */
.shatter, .tri-piece { backface-visibility: hidden; transform: translateZ(0); }

/* Triangle mask overlay — keeps your layout intact */
#bookMock { position: relative; }
#bookMock .cover-label { position: absolute; inset: 0; z-index: 1; }  /* title/author under the mask */
#maskLayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#maskLayer svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Tri-mask overlay – keeps sizing/left alignment intact */
#bookMock { position: relative; }                       /* use your existing aspect-ratio */
#titleLayer { position: absolute; inset: 0; z-index: 1; /* title sits under mask */
  display:grid; place-items:center; text-align:center;
}
#maskLayer { position: absolute; inset: 0; z-index: 3; pointer-events:none; }
#maskLayer svg { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Optional: nudge card to visually align with left text column on wide screens */
@media (min-width: 1100px){
  #bookMock { margin-left: 0px; } /* tiny tweak; adjust if needed */
}

.book-mock {
  max-width: 400px;  /* good balance for 15" screens */
  margin-inline: auto;
}
@media (max-width: 768px) {
  .book-mock { max-width: 260px; } /* smaller on mobile */
}
/* Keep mask layer above title */
#bookMock { position: relative; }
#titleLayer { position: absolute; inset: 0; z-index: 1; }
#maskLayer  { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }

/* Tighten hero gap */
.hero .grid { margin-top: 8px !important; } /* override any inline */

/* Make cover fit 15" laptops comfortably */
.book-mock { max-width: 400px; margin-inline: auto; }
@media (max-width: 1024px){ .book-mock { max-width: 400px; } }
@media (max-width: 768px){  .book-mock { max-width: 260px; } }


/* Hero cascade for text, banner, and cover */
.hero .banner,
.hero .headline,
.hero .sub,
.hero .cta,
.hero .book-mock {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFade 0.9s ease-out forwards;
}

/* Cascade order */
.hero .banner   { animation-delay: 0.1s; }
.hero .headline { animation-delay: 0.3s; }
.hero .sub      { animation-delay: 0.6s; }
.hero .cta      { animation-delay: 0.9s; }
.hero .book-mock { animation-delay: 1.2s; }

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- Cover: cinematic scale-in, then resume floating --- */
@keyframes heroCoverIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Ensure the cover uses this custom intro instead of the generic heroFade */
.hero .book-mock {
  /* Intro (runs once) … then float starts a bit later */
  animation:
    heroCoverIn 0.9s ease-out forwards 1.2s,
    float 6s ease-in-out infinite 2.4s; /* start float after intro finishes */
  will-change: transform, opacity;
}

/* If you previously added .hero .book-mock in the heroFade set, remove it
   or neutralize it so we don't double-animate the cover */
.hero .book-mock.heroFadeCancel,
.hero .book-mock { /* cancels generic heroFade for book-mock if it was applied elsewhere */
  /* no extra rules needed; the multi-animation above overrides */
}
@keyframes heroCoverIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.hero .book-mock { animation: heroCoverIn 1.0s ease-out forwards 1.3s, float 6s ease-in-out infinite 2.6s; }