/* ═══════════════════════════════════════════════════════════
   Galaxy Device Frames — Canonical Components
   ═══════════════════════════════════════════════════════════
   Three surfaces: Galaxy Watch 7, Galaxy S25, Galaxy Buds 3 Pro

   Source images: Global_Assets/DeviceFrame/
     GalaxyWatch.jpeg   (177×285 — small; used as reference, frame is CSS-drawn)
     GalaxyS25.webp     (700×700 — product shot; frame is CSS-drawn portrait)
     GalaxyBuds3Pro.jpg (2560×2560 — case photo; used as overlay chrome)

   USAGE — Galaxy Watch 7:
     <link rel="stylesheet" href="[path]/assets/css/device-frame-galaxy.css">
     <div class="galaxywatch7 galaxywatch7--md">
       <div class="galaxywatch7__screen">
         <iframe src="[path]/ui-screens/...html?noframe=1" ...></iframe>
       </div>
     </div>

   USAGE — Galaxy S25:
     <div class="galaxys25 galaxys25--md">
       <div class="galaxys25__screen">
         <iframe src="[path]/ui-screens/...html?noframe=1" ...></iframe>
       </div>
       <div class="galaxys25__camera" aria-hidden="true"></div>
     </div>

   USAGE — Galaxy Buds 3 Pro (concept card, no screen):
     <div class="galaxybuds3pro">
       <img class="galaxybuds3pro__photo"
            src="[path]/Global_Assets/DeviceFrame/GalaxyBuds3Pro.jpg"
            alt="" aria-hidden="true">
       <div class="galaxybuds3pro__state">
         Playing · 14s summary
       </div>
     </div>

   SIZE VARIANTS (use --gw-size / --gs-size CSS var to override):
     --xs  sm  md  lg  xl  (see bottom of file)
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   GALAXY WATCH 7
   Shape: rounded-square (squircle), 1.9" 396×396
   Physical ratio ≈ 1 : 1.28 (w : h with crown + band lugs)
   Screen inset: ~10% all sides from outer bezel edge
   ───────────────────────────────────────────────────────── */

.galaxywatch7 {
  position: relative;
  width: var(--gw-size, 200px);
  aspect-ratio: 1 / 1.28;
  flex-shrink: 0;
  user-select: none;
}

/* Outer case — titanium charcoal body */
.galaxywatch7::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36%;
  background: linear-gradient(145deg,
    #3a3a3c 0%,
    #2a2a2b 40%,
    #1e1e1f 70%,
    #2c2c2e 100%
  );
  box-shadow:
    0 2px 4px rgba(0,0,0,0.35),
    0 12px 28px rgba(0,0,0,0.28),
    0 28px 56px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}

/* Crown button — right side */
.galaxywatch7::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 28%;
  width: 5px;
  height: 16%;
  background: linear-gradient(to right, #3a3a3c, #2e2e30);
  border-radius: 0 3px 3px 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.08);
}

/* Second button (smaller, below crown) */
.galaxywatch7__btn {
  position: absolute;
  right: -4px;
  top: 48%;
  width: 4px;
  height: 10%;
  background: linear-gradient(to right, #3a3a3c, #2e2e30);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* Screen area */
.galaxywatch7__screen {
  position: absolute;
  inset: 8% 8% 8% 8%;
  border-radius: 30%;
  overflow: hidden;
  background: #000;
  z-index: 1;
  /* subtle inner bezel rim */
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.7);
}

.galaxywatch7__screen > * { width: 100%; height: 100%; }

.galaxywatch7__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* SIZE VARIANTS */
.galaxywatch7--xs  { --gw-size: 140px; }
.galaxywatch7--sm  { --gw-size: 170px; }
.galaxywatch7--md  { --gw-size: 200px; }
.galaxywatch7--lg  { --gw-size: 240px; }
.galaxywatch7--xl  { --gw-size: 280px; }

/* BAND ACCENT (optional decorative strap stub) */
.galaxywatch7__band-top,
.galaxywatch7__band-bot {
  position: absolute;
  left: 18%;
  width: 64%;
  height: 6%;
  background: #1a1a1b;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.galaxywatch7__band-top { bottom: 100%; margin-bottom: 2px; border-radius: 3px 3px 1px 1px; }
.galaxywatch7__band-bot { top: 100%;    margin-top: 2px;    border-radius: 1px 1px 3px 3px; }


/* ─────────────────────────────────────────────────────────
   GALAXY S25
   Shape: tall rounded rectangle, 6.2" 2340×1080
   Physical ratio ≈ 9 : 19.5 → use aspect 0.462 : 1
   Screen inset: minimal bezel (edge-to-edge with thin rail)
   Camera: centered punch-hole at top
   ───────────────────────────────────────────────────────── */

.galaxys25 {
  position: relative;
  width: var(--gs-size, 220px);
  aspect-ratio: 9 / 19.5;
  flex-shrink: 0;
  user-select: none;
}

/* Outer chassis — Armor Aluminum 2 */
.galaxys25::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: clamp(24px, 8%, 44px);
  background: linear-gradient(165deg,
    #d0d2d4 0%,
    #c0c1c3 30%,
    #b8b9bb 60%,
    #c8cacc 100%
  );
  box-shadow:
    0 1px 3px rgba(0,0,0,0.18),
    0 8px 20px rgba(0,0,0,0.14),
    0 20px 40px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* Power button — right side */
.galaxys25__power {
  position: absolute;
  right: -3px;
  top: 28%;
  width: 3.5px;
  height: 8%;
  background: linear-gradient(to right, #bbbcbe, #aaabac);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* Volume buttons — left side */
.galaxys25__vol {
  position: absolute;
  left: -3px;
  top: 24%;
  width: 3.5px;
  height: 6%;
  background: linear-gradient(to left, #bbbcbe, #aaabac);
  border-radius: 2px 0 0 2px;
  pointer-events: none;
}
.galaxys25__vol::after {
  content: '';
  position: absolute;
  top: 160%;
  left: 0;
  width: 100%;
  height: 80%;
  background: inherit;
  border-radius: inherit;
}

/* Screen area — ultra-thin bezel */
.galaxys25__screen {
  position: absolute;
  top: 0.8%;
  left: 1.5%;
  right: 1.5%;
  bottom: 0.8%;
  border-radius: clamp(22px, 7.5%, 40px);
  overflow: hidden;
  background: #000;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}

.galaxys25__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* Camera punch-hole */
.galaxys25__camera {
  position: absolute;
  top: 1.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 4%;
  height: calc(var(--gs-size, 220px) * 0.02 / 1px * 1px);
  aspect-ratio: 1;
  background: #000;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

/* SIZE VARIANTS */
.galaxys25--xs  { --gs-size: 160px; }
.galaxys25--sm  { --gs-size: 190px; }
.galaxys25--md  { --gs-size: 220px; }
.galaxys25--lg  { --gs-size: 270px; }
.galaxys25--xl  { --gs-size: 320px; }

/* DARK SCREEN state */
.galaxys25__screen--dark { background: #050508; }


/* ─────────────────────────────────────────────────────────
   GALAXY BUDS 3 PRO — Concept card (no display surface)
   Shows the case photo + an animated playback state overlay
   ───────────────────────────────────────────────────────── */

.galaxybuds3pro {
  position: relative;
  width: var(--gbuds-size, 200px);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #1a1a1b;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.22),
    0 12px 28px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.galaxybuds3pro__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}

/* Playback state overlay */
.galaxybuds3pro__state {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 14px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
  font-family: var(--font-sans, 'Geist Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.1px;
}

.galaxybuds3pro__led {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30c969;
  box-shadow: 0 0 6px rgba(48,201,105,0.7);
  animation: buds-led-pulse 2.4s ease-in-out infinite;
}

@keyframes buds-led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* SIZE VARIANTS */
.galaxybuds3pro--sm  { --gbuds-size: 160px; }
.galaxybuds3pro--md  { --gbuds-size: 200px; }
.galaxybuds3pro--lg  { --gbuds-size: 240px; }


/* ─────────────────────────────────────────────────────────
   GALAXY WATCH (SVG-based, 2026-04-28)
   Source: Global_Assets/DeviceFrame/GalaxyWatch.svg (934×1500)
   Screen circle: 775×775 at offset (77, 363) within the SVG canvas
   Screen center (cx, cy) = (464.5, 750.5), radius = 387.5

   USAGE:
     <div class="galaxywatch galaxywatch--lg">
       <img class="galaxywatch__chrome"
            src="[path]/Global_Assets/DeviceFrame/GalaxyWatch.svg"
            alt="" aria-hidden="true">
       <div class="galaxywatch__screen">
         <iframe src="[path]/ui-screens/...html?noframe=1" ...></iframe>
       </div>
     </div>
   ───────────────────────────────────────────────────────── */

.galaxywatch {
  position: relative;
  width: var(--gw2-size, 280px);
  aspect-ratio: 934 / 1500;
  flex-shrink: 0;
  user-select: none;
}

.galaxywatch__chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.galaxywatch__screen {
  position: absolute;
  /* 77/934 ≈ 8.244%, 363/1500 ≈ 24.200%, 775/934 ≈ 82.978%, 775/1500 ≈ 51.667% */
  left: 8.244%;
  top: 24.200%;
  width: 82.978%;
  height: 51.667%;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

.galaxywatch__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* SIZE VARIANTS — width drives layout; height resolves via aspect-ratio */
.galaxywatch--xs { --gw2-size: 180px; }
.galaxywatch--sm { --gw2-size: 220px; }
.galaxywatch--md { --gw2-size: 280px; }
.galaxywatch--lg { --gw2-size: 340px; }
.galaxywatch--xl { --gw2-size: 400px; }


/* ─────────────────────────────────────────────────────────
   SHARED UTILITIES
   ───────────────────────────────────────────────────────── */

/* Faded variant for before/after comparisons */
.galaxywatch7--faded,
.galaxys25--faded { opacity: 0.4; filter: grayscale(0.3); }

/* Side-by-side container */
.galaxy-pair {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

/* Centering helper */
.galaxy-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}