/* Gribobo website - the 3D layer.
   Same colors and layout as site.css; this only adds depth: a 3D hero with
   the sun, cards that tilt toward the pointer, raised buttons, and sections
   that rise into place. Everything here needs depth.js (it adds the "d3"
   class), and motion is skipped for people who ask for less motion. */

:root { --logo-ledge: #8A2E0B; --logo-shade: rgba(124, 45, 18, .35); --sun-edge: #C2410C; --ledge: #1E3A8A; --glare: rgba(255, 255, 255, .38); --shade: rgba(30, 58, 138, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-ledge: #7A2709; --logo-shade: rgba(0, 0, 0, .55); --sun-edge: #E2622A; --ledge: #172554; --glare: rgba(255, 255, 255, .10); --shade: rgba(0, 0, 0, .55); }
}
:root[data-theme="dark"] { --logo-ledge: #7A2709; --logo-shade: rgba(0, 0, 0, .55); --sun-edge: #E2622A; --ledge: #172554; --glare: rgba(255, 255, 255, .10); --shade: rgba(0, 0, 0, .55); }

/* ---------- Raised buttons: a ledge underneath, pressed down on click ---------- */
.d3 .btn {
  transform: translateZ(var(--z, 0px)) translateY(var(--lift, 0px));
  box-shadow: 0 5px 0 var(--ledge), 0 16px 24px -14px var(--shade);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.d3 .btn:hover { --lift: -2px; box-shadow: 0 7px 0 var(--ledge), 0 20px 28px -14px var(--shade); }
.d3 .btn:active { --lift: 4px; box-shadow: 0 1px 0 var(--ledge), 0 6px 10px -6px var(--shade); }
.d3 .btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 5px 0 var(--line); }
.d3 .btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--sun), 0 7px 0 var(--sun); }
.d3 .btn.ghost:active { box-shadow: inset 0 0 0 2px var(--sun), 0 1px 0 var(--sun); }

/* ---------- Logo: the sun coin turns over ---------- */
/* The logo and the 3D sun keep the original orange on purpose: the sun
   stays a sun, whatever the site colour. */
.d3 .logo img, .d3 .soon img {
  box-shadow: 0 4px 0 var(--logo-ledge), 0 10px 18px -8px var(--logo-shade);
  transition: transform .9s cubic-bezier(.3, 1.3, .5, 1);
}
.d3 .logo:hover img { transform: perspective(300px) rotateY(360deg); }

/* ---------- Headline: letters with a little depth ---------- */
.d3 .hero h1 em, .d3 .soon h1 em {
  text-shadow: 1px 1px 0 var(--accent-soft), 2px 2px 0 var(--accent-soft),
               3px 3px 0 var(--accent-soft), 4px 4px 0 var(--accent-soft),
               6px 10px 14px rgba(124, 45, 18, .18);
}

/* ---------- Hero: the chat demo floats in 3D in front of the sun ---------- */
.hero { overflow-x: hidden; overflow-x: clip; }
.stage { position: relative; }
.d3 .stage {
  perspective: 1400px; transform-style: preserve-3d;
  --px: 0; --py: 0; --sy: 0;
}
.d3 .stage .float { transform-style: preserve-3d; animation: d3-bob 7s ease-in-out infinite; }
.d3 .stage .demo {
  position: relative; z-index: 1; transform-style: preserve-3d;
  transform: rotateY(calc(-13deg + var(--px) * 9deg)) rotateX(calc(7deg - var(--py) * 7deg + var(--sy) * 10deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 2px 0 var(--line), 0 40px 70px -30px var(--shade), -30px 30px 60px -40px var(--shade);
}
.d3 .stage.hot .demo { transition: transform .12s linear; }
.d3 .demo-head, .d3 .styles { transform: translateZ(16px); }
.d3 .thread { transform-style: preserve-3d; }
.d3 .bubble { transform: translateZ(34px); box-shadow: 0 12px 20px -14px var(--shade); }
.d3 .bubble.mine { transform: translateZ(48px); }

/* The sun: a shaded sphere with a tilted orbit */
.sun3d { display: none; }
.d3 .sun3d {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  width: min(360px, 66%); aspect-ratio: 1; right: -22%; top: -22%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF4E6 0%, #FDBA74 32%, #F97316 68%, var(--sun-edge) 100%);
  box-shadow: inset -26px -34px 60px rgba(124, 45, 18, .35), 0 0 90px 12px rgba(253, 186, 116, .45);
  transform: translateZ(-220px) translate(calc(var(--px) * -26px), calc(var(--py) * -26px));
  /* flat: the orbit is drawn inside the sun's own layer, so it never cuts
     through the chat card in 3D */
  transform-style: flat;
}
.d3 .sun3d .ring {
  position: absolute; inset: -22%; border-radius: 50%;
  border: 2px solid rgba(194, 65, 12, .35);
  transform: rotateX(74deg) rotateY(-14deg);
}
.d3 .sun3d .ring::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FDBA74 60%, var(--sun-edge));
}
.d3 .sun3d .ring { animation: d3-orbit 16s linear infinite; }

/* Kind words floating around the phone, at different depths */
.floater { display: none; }
.d3 .floater {
  display: block; position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 18px 18px 18px 6px; font-weight: 700; font-style: italic; font-size: 15px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 18px 30px -16px var(--shade);
}
.d3 .floater.f1 { left: -14%; top: -1%; transform: translateZ(140px) translate(calc(var(--px) * 30px), calc(var(--py) * 30px)); animation: d3-drift 6s ease-in-out infinite; }
.d3 .floater.f2 { right: -6%; bottom: 14%; background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: 18px 18px 6px 18px;
  transform: translateZ(110px) translate(calc(var(--px) * 24px), calc(var(--py) * 24px)); animation: d3-drift 7.5s ease-in-out -2s infinite; }
.d3 .floater.f3 { left: 4%; bottom: -5%; font-style: normal; font-size: 22px; padding: 8px 12px; border-radius: 16px;
  transform: translateZ(170px) translate(calc(var(--px) * 36px), calc(var(--py) * 36px)); animation: d3-drift 8s ease-in-out -4s infinite; }

/* Decrypt turns the message over instead of fading it */
.d3 .bubble .text { transition: transform .24s ease, opacity .24s ease; transform-origin: 50% 50%; }
.d3 .bubble .text.flip { transform: perspective(400px) rotateX(90deg); opacity: 0; }

/* ---------- Cards that tilt toward the pointer, with a soft light ---------- */
.d3 .tilt {
  position: relative; transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.d3 .tilt.hot { transition: transform .08s linear, box-shadow .45s ease; box-shadow: 0 26px 44px -24px var(--shade); }
.d3 .tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), var(--glare), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.d3 .tilt.hot::after { opacity: 1; }
/* While leaning, the title, label and button come forward (only then, so
   text stays sharp when the card is at rest). */
.d3 .platform.tilt > h3, .d3 .dl-card.tilt > h2,
.d3 .platform.tilt > .status, .d3 .dl-card.tilt > .status { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.d3 .platform.tilt.hot > h3, .d3 .dl-card.tilt.hot > h2 { transform: translateZ(26px); }
.d3 .platform.tilt.hot > .status, .d3 .dl-card.tilt.hot > .status { transform: translateZ(34px); }
.d3 .platform.tilt.hot > .btn, .d3 .dl-card.tilt.hot .dl-buttons .btn { --z: 40px; }
.d3 .dl-card.tilt .dl-buttons { transform-style: preserve-3d; }
.d3 .teaser .thumb.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.d3 .panel-frame.tilt { border-radius: 6px; }
/* The story pictures are big drawings that take the browser a moment to
   paint. Keeping each on its own layer from the start means it is painted
   once, instead of again the moment it starts to lean, which made it
   vanish for a split second on hover. They don't need real 3D inside. */
.d3 .teaser .thumb.tilt, .d3 .panel-frame.tilt { will-change: transform; transform-style: flat; }

/* Step numbers are little coins that flip */
.d3 .steps li::before {
  box-shadow: 0 4px 0 var(--sun), 0 10px 16px -8px var(--shade);
  transition: transform .7s cubic-bezier(.3, 1.4, .5, 1);
}
.d3 .steps li:hover::before { transform: perspective(240px) rotateY(360deg) translateY(-3px); }

/* Manga captions sit on top of the page like paper */
.d3 .panel figcaption { transition: transform .3s ease, box-shadow .3s ease; }
.d3 .panel:hover figcaption { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.d3 .panel.finale:hover figcaption { box-shadow: 6px 6px 0 var(--accent); }

/* ---------- Sections rise into place while scrolling ---------- */
.d3 .rise {
  opacity: 0; transform-origin: 50% 100%;
  transform: perspective(900px) translateY(40px) rotateX(16deg);
  transition: opacity .7s ease var(--d, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.d3 .rise.in { opacity: 1; transform: none; }

/* ---------- Coming soon page ---------- */
.d3 .soon img { animation: d3-coin 9s ease-in-out infinite; }

@keyframes d3-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes d3-orbit { from { transform: rotateX(74deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(74deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes d3-drift { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
@keyframes d3-coin { 0%, 70%, 100% { transform: perspective(300px) rotateY(0); } 85% { transform: perspective(300px) rotateY(360deg); } }

@media (max-width: 860px) {
  .d3 .sun3d { width: 56%; right: -10%; top: -12%; }
  .d3 .floater.f1 { left: 2%; top: 1%; }
  .d3 .floater.f2 { right: 2%; bottom: -6%; }
  .d3 .floater.f3 { display: none; }
}
@media (max-width: 480px) {
  .d3 .floater { font-size: 13px; padding: 6px 11px; }
}

/* Less motion: keep the depth, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .d3 .stage .float, .d3 .sun3d .ring, .d3 .floater, .d3 .soon img { animation: none; }
  .d3 .rise { opacity: 1; transform: none; transition: none; }
  .d3 .logo:hover img, .d3 .steps li:hover::before { transform: none; }
  .d3 .bubble .text.flip { transform: none; }
}