/* ============================================================
RESOURCES PAGE (resources.html)
Dark theme that matches the waitlist visual language. Shared
tokens, fonts and the .theme-dark shell come from dtii.css.
SECTIONS
1. Top nav
2. Flip-book hero
3. Pill buttons
4. References list
5. Footer
6. Responsive
============================================================ */
/* ---------- 1) TOP NAV ----------
The header now uses the SHARED .site-header / .site-logo / .site-pill components
in dtii.css — identical markup and styling to index.html. Nothing page-specific
is needed here. */
/* ---------- 2) FLIP-BOOK HERO ---------- */
/* Transparent — the branded blue rays + glow come from the SHARED fixed backdrop
(.theme-dark::before in dtii.css), exactly like index, so the book sits in the
same visual world. No page-specific gradient/scrim. */
.flip-hero{position:relative;overflow:hidden;padding:clamp(1.5rem,4vh,3rem) 24px 56px;
background:transparent;}
/* READABILITY SCRIM — a soft dark radial behind the hero text so the title + intro
keep contrast where the bright background beams pass through. It sits BELOW the
content (.wrap is z-index:1) and fades out, so the branded rays still show. */
.flip-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(115% 72% at 50% 30%,
rgba(3,10,28,.62), rgba(3,10,28,.28) 52%, transparent 76%);}
/* The flip hero gets a WIDER wrap than the rest of the page so the book can be
large on desktop (the narrow sec-head keeps its own 760px cap). */
.flip-hero .wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;}
.flip-hero .sec-head{text-align:center;max-width:760px;margin:0 auto 24px;}
/* prominent but not shouting: smaller cap, comfortable line-height + balanced wrap */
.flip-hero .sec-head h1{color:var(--white);font-size:clamp(26px,3.4vw,40px);
line-height:1.14;margin:6px 0 14px;text-wrap:balance;}
.flip-hero .sec-head .eyebrow{color:var(--sky);}
.flip-hero .sec-head p{color:var(--on-dark-60);font-size:16px;line-height:1.55;}
/* ---------- DEEP-LINK TARGET (printed QR → https://dtiindia.com/resources#flipbook) ----------
id="flipbook" is the permanent anchor. has scroll-behavior:smooth and
resources.js smooth-scrolls on arrival; scroll-margin-top leaves room for the
header so the section isn't jammed under it. When the page is opened AT
#flipbook, the section gets a brief, tasteful blue attention-glow so it reads as
an intentional navigation to the flip book (auto-disabled for reduced motion). */
#flipbook{scroll-margin-top:clamp(70px,9vh,108px);}
@media(prefers-reduced-motion:no-preference){
#flipbook:target::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
background:radial-gradient(72% 56% at 50% 30%, rgba(0,93,248,.34), transparent 70%);
animation:flipTargetGlow 2.8s var(--ease) .15s 1;
}
@keyframes flipTargetGlow{0%,100%{opacity:0;}26%,46%{opacity:1;}}
}
.flip-wrap{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;gap:24px;}
/* The stage stays in normal flow (position:relative, NOT absolute/fixed). Its
height is set by resources.js to the fitted (~70vh) book height, and
overflow:hidden is a hard cap so the book can never exceed the container and
spill over the References section below it. */
.flip-stage{position:relative;z-index:0;width:100%;max-width:1360px;height:80vh;
overflow:hidden;display:grid;place-items:center;}
/* ZOOM wrapper: fills the stage and centres the book; carries the zoom/pan
transform. Overflow is clipped by .flip-stage so a zoomed page never spills. */
.flip-zoom{width:100%;height:100%;display:grid;place-items:center;
transform-origin:50% 50%;will-change:transform;}
.flip-zoom.is-zanim{transition:transform .25s var(--ease);}
.flip-stage.is-zoomed{cursor:grab;touch-action:none;}
.flip-stage.is-zoomed:active{cursor:grabbing;}
/* The centring shift glides over ~the flip duration (700ms) so it rides ALONG
with the page curl instead of sliding separately after it. */
.flip-book{margin:0 auto;transform-origin:center;transition:transform .62s var(--ease);}
@media(prefers-reduced-motion:reduce){.flip-book{transition:none;}}
.flip-book .stf__item,.flip-book .page{background:var(--white);box-shadow:0 18px 50px -24px rgba(0,0,0,.7);}
/* HTML render mode: each leaf is a real DOM page holding one full-bleed
(crisp on retina + lazy-loaded). Fill the leaf the page-flip engine sizes. */
.flip-book .flip-page{width:100%;height:100%;}
.flip-book img{width:100%;height:100%;display:block;object-fit:cover;}
/* ---- CLOSED-BOOK COVER (intro state) ----
Overlays the flip book on load: a centered single cover (PDF page 1) styled
to read as a CLOSED book — spine shadow on the left, stacked page edges on
the right, drop shadow, pointer cursor, hover lift and a "Click to open"
hint. Clicking it flips the real book open (resources.js). */
.flip-cover{position:absolute;inset:0;z-index:5;display:grid;place-items:center;
cursor:pointer;transition:opacity .35s ease;}
.flip-cover.is-opening{opacity:0;pointer-events:none;}
/* width/height are set inline by resources.js to one StPageFlip leaf size */
.flip-cover-book{position:relative;background:var(--white);
border-radius:2px 6px 6px 2px;
/* stacked page edges (right) + soft drop shadow */
box-shadow:2px 0 0 #ececec, 4px 0 0 #e0e0e0, 6px 0 0 #d4d4d4,
0 26px 60px -22px rgba(0,0,0,.75);
transition:transform .25s ease, box-shadow .25s ease;}
.flip-cover-book img{width:100%;height:100%;display:block;object-fit:cover;border-radius:2px 6px 6px 2px;}
/* spine shadow down the left (binding) edge */
.flip-cover-book::before{content:"";position:absolute;top:0;bottom:0;left:0;width:16px;z-index:2;
pointer-events:none;border-radius:2px 0 0 2px;
background:linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,.14) 55%, rgba(0,0,0,0));}
.flip-cover:hover .flip-cover-book,
.flip-cover:focus-visible .flip-cover-book{transform:translateY(-5px);
box-shadow:2px 0 0 #ececec, 4px 0 0 #e0e0e0, 6px 0 0 #d4d4d4,
0 36px 72px -22px rgba(0,0,0,.82);}
.flip-cover:focus-visible{outline:none;}
/* dark pill so it stays legible over the WHITE cover page */
.flip-cover-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
font-family:'DM Sans';font-weight:500;font-size:13px;letter-spacing:.04em;color:#fff;
background:rgba(3,13,42,.82);border:1px solid rgba(150,190,255,.32);border-radius:999px;
padding:7px 15px;box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
animation:coverPulse 2.4s ease-in-out infinite;}
.flip-cover-hint::before{content:"";width:9px;height:11px;border:1.5px solid var(--sky);
border-radius:1px 2px 2px 1px;border-left-width:2.5px;display:inline-block;}
.flip-cover:hover .flip-cover-hint,
.flip-cover:focus-visible .flip-cover-hint{border-color:rgba(150,190,255,.7);
box-shadow:0 10px 26px -8px rgba(0,0,0,.8);}
@keyframes coverPulse{0%,100%{opacity:.72;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){
.flip-cover-hint{animation:none;}
.flip-cover-book{transition:none;}
}
.flip-loading{color:var(--on-dark-60);font-size:14px;display:flex;align-items:center;gap:10px;}
.flip-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
border-top-color:var(--sky);animation:flipspin .8s linear infinite;}
@keyframes flipspin{to{transform:rotate(360deg);}}
.flip-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;}
.flip-controls button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.07);border:1px solid var(--dark-line);color:var(--white);
cursor:pointer;font-size:20px;line-height:1;
transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.flip-controls button:hover:not(:disabled){background:var(--blue);border-color:var(--blue);
transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,93,248,.6);}
.flip-controls button:active:not(:disabled){transform:translateY(-1px);}
.flip-controls button:disabled{opacity:.38;cursor:default;}
.flip-controls .pageno{font-family:'DM Sans';font-size:14px;color:var(--on-dark-60);
min-width:84px;text-align:center;font-variant-numeric:tabular-nums;}
/* ---------- PAGE-TURN SOUND TOGGLE ----------
A control-bar button: it inherits the round look + hover from
`.flip-controls button`, sits right of the next arrow (after a thin divider),
so it matches the arrows and never overlaps the book, counter or text. */
.flip-controls .flip-sep{width:1px;height:26px;background:var(--dark-line);margin:0 2px;flex:0 0 auto;}
.flip-sound svg{display:block;width:19px;height:19px;}
.flip-sound .ico-off{display:none;}
.flip-sound.is-muted{color:var(--on-dark-60);} /* dimmer glyph when muted */
.flip-sound.is-muted .ico-on{display:none;}
.flip-sound.is-muted .ico-off{display:block;}
/* ZOOM buttons: +/- inherit the round control-button look; the level read-out is
an auto-width pill that doubles as the reset-to-fit button. */
.flip-zbtn svg{display:block;}
.flip-controls .flip-zlevel{width:auto;min-width:52px;height:auto;border-radius:999px;
padding:8px 10px;font-family:'DM Sans';font-size:12.5px;line-height:1;
color:var(--on-dark-60);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.flip-controls .flip-zlevel:hover:not(:disabled){color:#fff;transform:translateY(-2px);}
/* these helper lines sit over the brightest part of the rays — a soft dark
text-shadow keeps them legible without a heavy box. */
.flip-hint{font-size:12.5px;color:rgba(236,236,239,.56);letter-spacing:.02em;
text-shadow:0 1px 3px rgba(0,6,22,.75);}
.flip-fallback{font-size:14px;color:var(--on-dark-60);text-align:center;
text-shadow:0 1px 3px rgba(0,6,22,.75);}
/* The offline-download trigger is a