/* ============ Hekaya Books — cinematic design system ============ */
:root {
  --ink: #07090f;
  --ink-2: #0c1020;
  --ink-3: #131a30;
  --gold: #e8b04b;
  --gold-soft: #f2cd8a;
  --cream: #f4ead8;
  --muted: rgba(244, 234, 216, .62);
  --glass: rgba(255, 255, 255, .055);
  --glass-strong: rgba(255, 255, 255, .09);
  --glass-border: rgba(255, 255, 255, .12);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, .55);
  --radius: 22px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection { background: rgba(232, 176, 75, .35); }

/* ---- cinematic backdrop layers ---- */
.scene {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(232, 176, 75, .14), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(78, 100, 190, .16), transparent 60%),
    linear-gradient(180deg, #0a0d18 0%, #07090f 55%, #05060b 100%);
}
.scene-photo {
  position: fixed; inset: -6%; z-index: -2;
  background-size: cover; background-position: center;
  opacity: .2; filter: saturate(.8) contrast(1.1) brightness(.85);
  animation: kenburns 38s ease-in-out infinite alternate;
}
.scene-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 35%, rgba(4, 5, 9, .85) 100%),
    linear-gradient(180deg, rgba(4,5,9,.65) 0%, transparent 25%, transparent 65%, rgba(4,5,9,.92) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
#dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

@keyframes kenburns {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.09) translateY(-2%); }
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); }
  80% { transform: translate(4%,4%); }
}

/* ---- glassmorphism ---- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- nav ---- */
.nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; z-index: 50; border-radius: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.logo-mark {
  width: 44px; height: 44px; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 10px rgba(232,176,75,.45));
}
.logo-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: .3px; }
.logo-name span { color: var(--gold); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .25s; }
.nav-links a:hover { color: var(--cream); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: .2px;
  text-decoration: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn-gold {
  background: linear-gradient(135deg, #f2cd8a 0%, var(--gold) 45%, #c98a24 100%);
  color: #1a1206; box-shadow: 0 10px 30px rgba(232,176,75,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(232,176,75,.5); }
.btn-ghost {
  background: var(--glass); color: var(--cream);
  border: 1px solid var(--glass-border); backdrop-filter: blur(12px);
}
.btn-ghost:hover { transform: translateY(-3px); background: var(--glass-strong); }
.btn-wa { background: linear-gradient(135deg, #3ddc6e, #128c4a); color: #06170c; box-shadow: 0 10px 30px rgba(37,211,102,.3); }
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(37,211,102,.45); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---- typography ---- */
.display {
  font-family: var(--font-display); font-weight: 570;
  line-height: 1.06; letter-spacing: -.5px;
}
.display em { font-style: italic; color: var(--gold); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.lede { color: var(--muted); font-size: 17.5px; line-height: 1.65; font-weight: 350; }

/* ---- scroll reveal (3D flip-in) ---- */
.reveal {
  opacity: 0; transform: perspective(900px) translateY(38px) rotateX(10deg) scale(.985);
  transform-origin: 50% 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.field input, .field textarea, .field select {
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
  border-radius: 13px; padding: 13px 16px; color: var(--cream);
  font-family: var(--font-body); font-size: 15px; outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus {
  border-color: rgba(232,176,75,.6); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 4px rgba(232,176,75,.12);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(244,234,216,.32); }

/* ---- dropzone ---- */
.dropzone {
  border: 1.5px dashed rgba(232,176,75,.4); border-radius: 16px;
  padding: 26px 18px; text-align: center; cursor: pointer;
  background: rgba(232,176,75,.05); transition: all .3s;
  color: var(--muted); font-size: 14.5px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold); background: rgba(232,176,75,.1); transform: translateY(-2px); }
.dropzone.hasfile { border-style: solid; border-color: rgba(61,220,110,.55); background: rgba(61,220,110,.07); color: var(--cream); }

/* ---- 3D tilt cards ---- */
[data-tilt] { position: relative; transform-style: preserve-3d; will-change: transform; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), rgba(232,176,75,.05) 40%, transparent 62%);
  opacity: 0; transition: opacity .35s;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }
[data-tilt] .tilt-deep { transform: translateZ(42px); }
[data-tilt] .tilt-mid { transform: translateZ(22px); }

/* ---- misc ---- */
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
  font-size: 13px; color: var(--muted); backdrop-filter: blur(10px);
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(232,176,75,.25); border-top-color: var(--gold);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot,0deg)); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,110,.35); } 50% { box-shadow: 0 0 0 12px rgba(61,220,110,0); } }

@media (max-width: 950px) {
  /* keep the nav usable on phones — only genuinely secondary links drop out,
     so My Library / Sign out / Back links stay reachable.
     950px covers big phones in landscape and small tablets too. */
  .nav { padding: 10px 14px; width: calc(100% - 20px); top: 12px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13.5px; }
  /* comfortable tap targets on touch screens */
  .nav-links a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
  /* NOTE: must match the specificity of the rule above (0,2,1) or it loses and
     the link reappears — `.nav-links .hide-sm` alone is not enough. */
  .nav-links a.hide-sm { display: none; }
  .nav .btn-sm { padding: 9px 15px; font-size: 12.5px; }
}
@media (max-width: 430px) {
  /* very small screens: the logo mark alone carries the brand */
  .logo-name { display: none; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 12.5px; }
  .nav .btn-sm { padding: 8px 13px; font-size: 12px; }
}