/*
 * ─────────────────────────────────────────────────────────────────────────────
 * issue-anim-claude.css
 * Contest 4 — Issue Page Icon Animation (Claude entry)
 *
 * Activated by: html.issue-anim-claude  (added by issue-anim-claude.js when
 *               ?issue-anim=claude is present in the URL)
 *
 * Preview URL (winner / Prototype A):
 *   /print-self-serve/order-success?preview=issue&issue-anim=claude
 * Preview URL (Prototype B):
 *   /print-self-serve/order-success?preview=issue&issue-anim=claude&proto-anim=b
 *
 * Works independently of ?issue-v=* redesigns; CSS classes do not overlap.
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * BRAINSTORM — 5 animation concepts for the "Please see staff" issue icon
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * GOAL: Calm, professional, concierge energy. Readable at arm's length (kiosk).
 * AVOID: Flashing red, alarm sirens, warning triangles, scan-beam urgency.
 *
 * ── Concept 1: "Concierge Bell" ─────────────────────────────────────── ★ WINNER
 *   A hotel service bell in white line-art on a deep navy circle.
 *   Motion: gentle oscillating sway (±5°, 3.2 s, origin at top — the bell
 *   is "ringing"). Three concentric rings (two gold, one teal) pulse outward
 *   in a staggered loop — like sound waves radiating from a desk bell.
 *   Reads instantly as "service requested" at arm's length.
 *   Tone: professional hotel front desk — calm, purposeful.
 *
 * ── Concept 2: "Staff Beacon" ───────────────────────────────── Prototype B
 *   A staff person silhouette inside a teal circle. A gold semi-arc orbits
 *   clockwise overhead (halo sweep); a smaller teal arc counter-rotates.
 *   Conveys "a staff member is on the way." Dual rotation adds depth
 *   without urgency.
 *   Tone: someone is coming — warm, assistive, gentle motion.
 *
 * ── Concept 3: "Soft Pulse Lamp" ────────────────────────────────────────────
 *   A rounded dome (CSS only) that breathes: box-shadow expands navy → teal
 *   at peak (~4 s loop), like a glowing status light on premium hardware.
 *   Pros: Extremely minimal, very zen. Cons: Icon shape is ambiguous;
 *   harder to decode at arm's length without context.
 *
 * ── Concept 4: "Counter Handoff" ────────────────────────────────────────────
 *   Two document outlines — the front sheet slides slightly forward in a
 *   loop (translateX), mimicking a paper being handed across a counter.
 *   Gold corner fold, soft shadow grows as if the sheet is lifted.
 *   Pros: Strong printing metaphor. Cons: Motion might read as an error
 *   (document moving unexpectedly) rather than "help is here."
 *
 * ── Concept 5: "Attention Dots" ─────────────────────────────────────────────
 *   Three dots in a triangle formation (gold / teal / navy) pulse via
 *   staggered opacity + scale. Minimalist status-indicator style.
 *   Pros: Very subtle, brand-token colours. Cons: Reads as a generic
 *   loading state — lacks the service/concierge metaphor needed here.
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * PROTOTYPED: Concept 1 (Bell) + Concept 2 (Staff Beacon)
 * WINNER: Concept 1 — "Concierge Bell"
 *   Rationale: The service bell is universally understood as "call for help /
 *   assistance available." The sway + staggered radial pulse is distinctive
 *   and calm — never alarming. Reads clearly at arm's length on a kiosk
 *   screen. Concept 2's orbiting arcs are visually interesting but slightly
 *   more mechanical; the bell metaphor is warmer and more concierge-appropriate.
 * ══════════════════════════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────────────────────────
   Global keyframes (no scope needed for @keyframes)
   ───────────────────────────────────────────────────────────────────────────── */

/* Ring pulse — expand and fade outward */
@keyframes ia-claude-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.72); opacity: 0.85; }
  55%  { opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(2.65); opacity: 0; }
}

/* Bell sway — oscillates like a freshly rung service bell */
@keyframes ia-claude-bell-sway {
  0%,   8%  { transform: rotate(0deg); }
  22%       { transform: rotate(-5.5deg); }
  42%       { transform: rotate(5deg); }
  57%       { transform: rotate(-3deg); }
  72%       { transform: rotate(2.5deg); }
  84%, 100% { transform: rotate(0deg); }
}

/* Hero entrance — gentle spring reveal */
@keyframes ia-claude-hero-enter {
  from {
    opacity: 0;
    transform: scale(0.78) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Proto B — clockwise orbit arc */
@keyframes ia-claude-orbit-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Proto B — counter-clockwise orbit arc */
@keyframes ia-claude-orbit-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Reset issue icon area when animation is active
   ───────────────────────────────────────────────────────────────────────────── */

html.issue-anim-claude .success-panel--printing-issue .success-icon--issue {
  /* Cancel appearance set by issue-redesign-claude.css (if co-active) */
  animation: none;
  background: transparent;
  min-width: 0;
  width: auto;
  /* Keep flex-centering so hero sits correctly in the grid column */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Hide the PNG injected by existing issue scripts */
html.issue-anim-claude .success-panel--printing-issue .success-icon--issue > img {
  display: none;
}

/* Suppress the ::after pseudo icon from issue-redesign-claude.css */
html.issue-anim-claude .success-panel--printing-issue .success-icon--issue::after {
  display: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Hero container (wraps rings + bell stage)
   ───────────────────────────────────────────────────────────────────────────── */

html.issue-anim-claude .ia-claude-hero {
  position: relative;
  width: 5.25rem;
  height: 5.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Rings expand beyond this box; let them overflow */
  overflow: visible;
  animation: ia-claude-hero-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Pulsing rings — PROTOTYPE A default
   ───────────────────────────────────────────────────────────────────────────── */

html.issue-anim-claude .ia-claude-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Same footprint as the bell stage — expand via keyframe scale */
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
  animation: ia-claude-ring-expand 3s ease-out infinite;
}

html.issue-anim-claude .ia-claude-ring--a {
  border-color: #c9a227; /* gold */
  animation-delay: 0s;
}

html.issue-anim-claude .ia-claude-ring--b {
  border-color: rgba(201, 162, 39, 0.72); /* gold, softer */
  animation-delay: 1s;
}

html.issue-anim-claude .ia-claude-ring--c {
  border-color: #0f8f89; /* teal */
  animation-delay: 2s;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Bell stage — navy circle holding the bell SVG
   ───────────────────────────────────────────────────────────────────────────── */

html.issue-anim-claude .ia-claude-bell-stage {
  position: relative;
  z-index: 1;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: #1a2a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 20px rgba(26, 42, 74, 0.26),
    0 1px 4px  rgba(26, 42, 74, 0.14);
  flex-shrink: 0;
}

/* Bell SVG — sways from the suspension point at the top */
html.issue-anim-claude .ia-claude-bell-svg {
  width: 2.1rem;
  height: auto;
  display: block;
  animation: ia-claude-bell-sway 3.2s ease-in-out infinite;
  /* Origin near the handle at the top of the bell */
  transform-origin: 50% 14%;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PROTOTYPE B — "Staff Beacon"
   html.issue-anim-claude.issue-anim-claude--proto-b
   ───────────────────────────────────────────────────────────────────────────── */

/* Override ring animations — become slow orbital arcs */
html.issue-anim-claude.issue-anim-claude--proto-b .ia-claude-ring--a {
  border-color: transparent;
  border-top-color: #c9a227;
  border-right-color: rgba(201, 162, 39, 0.4);
  border-width: 3px;
  opacity: 1;
  /* Cancel expand; use orbit rotation instead */
  animation: ia-claude-orbit-cw 7s linear infinite;
}

html.issue-anim-claude.issue-anim-claude--proto-b .ia-claude-ring--b {
  border-color: transparent;
  border-bottom-color: #0f8f89;
  border-left-color: rgba(15, 143, 137, 0.4);
  border-width: 2px;
  width: 3.75rem;
  height: 3.75rem;
  opacity: 1;
  animation: ia-claude-orbit-ccw 4.5s linear infinite;
}

html.issue-anim-claude.issue-anim-claude--proto-b .ia-claude-ring--c {
  display: none;
}

/* Stage: teal instead of navy for Beacon variant */
html.issue-anim-claude.issue-anim-claude--proto-b .ia-claude-bell-stage {
  background: #0d7b76;
}

/* Staff icon: no sway — steady presence */
html.issue-anim-claude.issue-anim-claude--proto-b .ia-claude-bell-svg {
  animation: none;
  width: 2rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Responsive: compact on narrow screens (≤520 px)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  html.issue-anim-claude .ia-claude-hero,
  html.issue-anim-claude .ia-claude-bell-stage {
    width: 4.5rem;
    height: 4.5rem;
  }

  html.issue-anim-claude .ia-claude-ring {
    width: 4.5rem;
    height: 4.5rem;
  }

  html.issue-anim-claude .ia-claude-bell-svg {
    width: 1.85rem;
  }
}