/* ==========================================================================
   consent.css - cookie consent, v3 "liquid-glass note" (2026-07-28).
   A corner note in the site's own chrome language: dark glass sheet, the
   white-on-dark type ladder, a tracked caps kicker, Georgia serif body with
   an italic leaf accent, and the dock-pill recipe on both buttons complete
   with the signature letter-roll hover. Bottom-LEFT so the explore dock
   (bottom center) stays clear. Sits under the film grain (z1500) so the
   grain textures it like every other surface on the site.
   Self-contained: the legal pages load only legal.css, so ladder values are
   inlined rather than pulled from scenes.css tokens.
   The two buttons are deliberately identical: consent and refusal must cost
   the visitor the same effort.
   ========================================================================== */

.cc{
  position:fixed;
  left:12px;
  right:12px;
  bottom:clamp(16px,3vw,24px);
  z-index:1400;                        /* below film grain (1500), above scenes */
  font-family:Georgia,"Times New Roman",serif;
}
/* Pages with the explore dock (index): float the note centered above it.
   consent.js adds cc-dock when nav.dock exists; legal pages stay near the edge. */
.cc.cc-dock{bottom:118px}

.cc-inner{
  max-width:480px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:20px 24px 20px;
  border-radius:18px;
  color:rgba(255,255,255,.88);
  background:rgba(2,58,56,.66);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 50px rgba(2,32,30,.4);
  /* Enter: rise + settle, strong ease-out. Interruptible transition (not
     keyframes) so a fast dismiss never fights the entrance. */
  opacity:1;
  transform:none;
  transition:opacity .48s cubic-bezier(.23,1,.32,1),transform .48s cubic-bezier(.23,1,.32,1);
}
.cc.cc-enter{pointer-events:none}     /* never intercept clicks before it is visible */
.cc.cc-enter .cc-inner{opacity:0;transform:translateY(18px) scale(.98)}

/* Tracked caps kicker - same micro-typography ladder as the scene labels. */
.cc-kicker{
  margin:0;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.cc-text{
  margin:0;
  font-size:15px;
  line-height:1.75;
}
.cc-text em{font-style:italic;color:#7EC179}
/* The storage-condition sentence starts on its own line; single line on
   desktop, natural wrap only where the width runs out (small phones). */
.cc-text2{display:block;white-space:nowrap}
@media (max-width:520px){
  .cc-text2{white-space:normal}
}

.cc-actions{display:flex;gap:10px;justify-content:center}

/* Dock-pill recipe: glass pill, lift on hover, press scale. */
.cc-btn{
  font-family:inherit;
  font-size:13px;
  letter-spacing:.02em;
  padding:9px 22px;
  border-radius:999px;
  cursor:pointer;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
          backdrop-filter:blur(10px) saturate(1.2);
  transition:background .3s cubic-bezier(.2,.7,.3,1),transform .16s cubic-bezier(.23,1,.32,1);
}
.cc-btn:active{transform:scale(.97)}
.cc-btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}

/* Letter-roll hover, the splash/dock signature: each glyph carries its own
   clone one em below via text-shadow and rolls up with a small stagger. */
.cc-roll{
  display:inline-flex;
  overflow:hidden;
  text-shadow:0 1em 0 currentColor;
}
.cc-roll > span{
  display:block;
  line-height:1em;
  white-space:pre;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.cc-roll > span:nth-child(1){transition-delay:0ms}
.cc-roll > span:nth-child(2){transition-delay:26ms}
.cc-roll > span:nth-child(3){transition-delay:52ms}
.cc-roll > span:nth-child(4){transition-delay:78ms}
.cc-roll > span:nth-child(5){transition-delay:104ms}
.cc-roll > span:nth-child(6){transition-delay:130ms}
.cc-roll > span:nth-child(7){transition-delay:156ms}

@media (hover:hover) and (pointer:fine){
  .cc-btn:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
  .cc-btn:hover .cc-roll > span{transform:translateY(-100%)}
}

/* Withdrawal affordance appended to the existing legal link rows. */
.cc-reopen{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.cc-reopen:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cc-inner{transition:opacity .2s ease}
  .cc.cc-enter .cc-inner{transform:none}
  .cc-btn{transition:background .2s ease}
  .cc-btn:active{transform:none}
  .cc-roll > span{transition:none}
}

@media (max-width:520px){
  .cc-inner{padding:16px 16px 18px;border-radius:16px}
  .cc-actions{width:100%}
  .cc-btn{flex:1}
}