/* ============================================================
   HELIOCASTLE — PLAN DEVICES
   A tablet and a phone, drawn — no photograph. Each screen runs the
   same small page: the mark at the top, the logo lit in the middle,
   the line at the foot.

   The scene's unit is 1cqw on .pd-in, never on .pd itself: a container
   cannot measure itself, and cqw written on the container falls back to
   the viewport. Everything below is an em of that unit, so the whole
   thing scales by setting the wrapper's width and nothing else.
   ============================================================ */

.pd {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
}
.pd-in {
  position: absolute;
  inset: 0;
  font-size: 1cqw;
}

/* the light the screens throw into the room */
.pd-glow {
  position: absolute;
  inset: -6% -8% -2% -8%;
  background:
    radial-gradient(38% 42% at 46% 48%, rgb(var(--accent-light-rgb) / 0.22), transparent 70%),
    radial-gradient(70% 64% at 52% 52%, rgb(var(--accent-rgb) / 0.1), transparent 76%);
  filter: blur(8px);
  animation: pd-breathe 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pd-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------------
   THE FRAMES
   ------------------------------------------------------------------ */

.pd-tablet,
.pd-phone {
  position: absolute;
  border-radius: 2.2em;
  background: linear-gradient(152deg, #5b6068 0%, #22252b 22%, #0d0f12 60%, #08090b 100%);
  box-shadow:
    0 4em 7em rgb(var(--shadow-rgb) / calc(0.72 * var(--shadow-a))),
    0 0 4em rgb(var(--accent-rgb) / 0.12),
    inset 0 0 0 0.08em rgb(var(--ink-rgb) / 0.16);
}

.pd-tablet {
  left: 0;
  top: 0;
  width: 68%;
  aspect-ratio: 1 / 1.17;
  padding: 1.1em;
  z-index: 1;
}
.pd-phone {
  right: 0;
  bottom: 0;
  width: 33%;
  aspect-ratio: 1 / 1.98;
  padding: 0.75em;
  border-radius: 2.6em;
  z-index: 2;
}

/* the speaker slot on the phone */
.pd-phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.1em;
  width: 24%;
  height: 0.3em;
  transform: translateX(-50%);
  border-radius: 0.3em;
  background: rgb(var(--ink-rgb) / 0.3);
  z-index: 3;
}

/* ------------------------------------------------------------------
   THE SCREEN, AND THE PAGE ON IT
   ------------------------------------------------------------------ */

.pd-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.5em;
  background:
    radial-gradient(62% 48% at 50% 52%, #14100b 0%, #07080a 72%),
    #06070a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.3em 1.1em 1.2em;
}
.pd-phone .pd-screen { border-radius: 2em; padding: 1.6em 0.9em 1.1em; }

/* the glass */
.pd-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(var(--ink-rgb) / 0.1) 0 18%, transparent 44%);
  pointer-events: none;
}

/* --- the little header --- */
.pd-bar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
}
.pd-bar img {
  width: 2.4em;
  height: auto;
  flex: 0 0 2.4em;
}
.pd-bar b {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.95em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.pd-bar span {                          /* the second line under the name */
  display: block;
  margin-top: 0.3em;
  font-size: 0.42em;
  letter-spacing: 0.3em;
  color: rgb(var(--ink-rgb) / 0.5);
}
.pd-bar i {                             /* the menu */
  margin-left: auto;
  width: 1.7em;
  height: 1.3em;
  flex: 0 0 1.7em;
  background:
    linear-gradient(rgb(var(--ink-rgb) / 0.75) 0 0) 0 0    / 100% 0.13em no-repeat,
    linear-gradient(rgb(var(--ink-rgb) / 0.75) 0 0) 0 50%  / 100% 0.13em no-repeat,
    linear-gradient(rgb(var(--ink-rgb) / 0.75) 0 0) 0 100% / 100% 0.13em no-repeat;
}
.pd-phone .pd-bar b { font-size: 1.45em; }
.pd-phone .pd-bar img { width: 1.8em; flex-basis: 1.8em; }

/* --- the logo, lit, in the middle --- */
.pd-mark {
  width: 62%;
  height: auto;
  margin: auto 0;
  filter: drop-shadow(0 0 1.4em rgb(var(--emit-rgb) / calc(0.5 * var(--emit-a))))
          drop-shadow(0 0 0.5em rgb(var(--accent-rgb) / 0.35));
  animation: pd-mark-glow 6s ease-in-out infinite;
}
@keyframes pd-mark-glow {
  0%, 100% { filter: drop-shadow(0 0 1.1em rgb(var(--emit-rgb) / calc(0.42 * var(--emit-a))))
                     drop-shadow(0 0 0.5em rgb(var(--accent-rgb) / 0.3)); }
  50%      { filter: drop-shadow(0 0 1.8em rgb(var(--emit-rgb) / calc(0.6 * var(--emit-a))))
                     drop-shadow(0 0 0.7em rgb(var(--accent-rgb) / 0.42)); }
}
.pd-phone .pd-mark { width: 72%; }

/* the pool of light the logo stands in */
.pd-mark-floor {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 22%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(var(--emit-rgb) / calc(0.4 * var(--emit-a))), transparent 72%);
  filter: blur(0.5em);
  pointer-events: none;
}

/* --- the line at the foot --- */
.pd-tag {
  font-family: var(--sans);
  font-size: 1.12em;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.72);
  white-space: nowrap;
}
.pd-tag em { font-style: normal; color: var(--gold); margin: 0 0.3em; }
.pd-phone .pd-tag { font-size: 0.86em; letter-spacing: 0.26em; }

/* ------------------------------------------------------------------
   WHAT THEY STAND ON
   ------------------------------------------------------------------ */

.pd-floor {
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: -3%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(var(--shadow-rgb) / calc(0.8 * var(--shadow-a))), transparent 72%);
  filter: blur(1.2em);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   WHEN THE SCENE ITSELF IS SMALL
   Below ~360px the screens are barely 200px wide, and 3px type reads as
   dirt rather than text. A container query — not a media query — because
   what matters is the size of this scene, not the size of the window.
   ------------------------------------------------------------------ */

@container (max-width: 360px) {
  .pd-bar span { display: none; }
  .pd-tag { display: none; }
  .pd-mark { width: 68%; }
  .pd-phone .pd-mark { width: 76%; }
}

/* ============================================================
   MOTION
   The scene is never quite still: the two devices breathe out of
   phase, the glass catches a sweep, the header runs a loading
   line and the mark floats in its own light.

   The whole scene also leans towards the cursor. js/tilt.js writes
   --rx / --ry here and nothing else — `transform` on .pd itself
   belongs to js/parallax.js, and the two must never share an
   element or they overwrite each other.
   ============================================================ */

.pd { perspective: 900px; }

.pd-in {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- the two of them arrive, then breathe --- */

.pd-tablet { --z: 0em; }
.pd-phone  { --z: 6em; }

.pd-tablet,
.pd-phone {
  transform: translateZ(var(--z));
  animation:
    pd-enter 1s var(--ease) both,
    pd-bob 7s ease-in-out infinite;
}
.pd-tablet { animation-delay: 0.45s, 1.5s; }
.pd-phone  { animation-delay: 0.65s, 1.7s; }   /* out of phase on purpose */
.pd-phone  { animation-duration: 1s, 5.6s; }

@keyframes pd-enter {
  from { opacity: 0; transform: translateZ(var(--z)) scale(0.92) rotateY(-9deg); }
  to   { opacity: 1; transform: translateZ(var(--z)) scale(1) rotateY(0deg); }
}
@keyframes pd-bob {
  0%, 100% { transform: translateZ(var(--z)) translateY(0); }
  50%      { transform: translateZ(var(--z)) translateY(-0.9em); }
}

/* --- a sweep across the glass --- */

.pd-screen::before {
  content: "";
  position: absolute;
  inset: -20% -70%;
  z-index: 2;
  background: linear-gradient(100deg,
    transparent 42%,
    rgb(var(--emit-rgb) / 0.12) 50%,
    transparent 58%);
  animation: pd-sweep 7.5s ease-in-out infinite;
  pointer-events: none;
}
.pd-phone .pd-screen::before { animation-duration: 9s; animation-delay: 1.2s; }

@keyframes pd-sweep {
  0%        { transform: translateX(-42%); }
  58%, 100% { transform: translateX(42%); }
}

/* --- the header runs a loading line, the way a live page does --- */

.pd-bar { position: relative; }
.pd-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75em;
  height: 0.16em;
  border-radius: 0.16em;
  background:
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.9), rgb(var(--accent-rgb) / 0)) 0 0 / 42% 100% no-repeat,
    rgb(var(--ink-rgb) / 0.1);
  animation: pd-load 3.4s ease-in-out infinite;
}
.pd-phone .pd-bar::after { animation-delay: 0.8s; }

@keyframes pd-load {
  0%   { background-position: -48% 0; }
  100% { background-position: 148% 0; }
}

/* --- the mark floats in its own light --- */

.pd-mark {
  animation:
    pd-mark-glow 6s ease-in-out infinite,
    pd-mark-float 7.5s ease-in-out infinite;
}
@keyframes pd-mark-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-0.55em) scale(1.02); }
}

.pd-mark-floor { animation: pd-floor 7.5s ease-in-out infinite; }
@keyframes pd-floor {
  0%, 100% { opacity: 1;    transform: scaleX(1); }
  50%      { opacity: 0.72; transform: scaleX(0.88); }
}

/* the two crosses in the line keep a small pulse of their own */
.pd-tag em { animation: pd-cross 3.6s ease-in-out infinite; }
.pd-tag em:last-of-type { animation-delay: 0.5s; }
@keyframes pd-cross {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}