/* ENENINTA / Liquid-camera button system 2026
   Silver-liquid edge from product-photography reference, with brand Volt Coral glow.
   Solid dark interior keeps button labels legible over both light and dark layouts. */
:root { --liquid-coral:var(--coral); --liquid-deep:var(--ink); --liquid-frost:var(--frost); }

.shiny-button, .liquid-cta, .nav-contact, .back-btn, a.pill {
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,1.6vw,26px);
  min-height:54px;
  padding:14px 23px;
  border:2px solid transparent;
  border-radius:999px;
  background:
    radial-gradient(ellipse at 100% 120%, color-mix(in srgb,var(--coral) 40%,transparent) 0,color-mix(in srgb,var(--coral) 13%,transparent) 25%,transparent 65%) padding-box,
    linear-gradient(165deg,color-mix(in srgb,var(--ink) 40%,var(--storm)) 0%,var(--ink) 55%,var(--ink) 100%) padding-box,
    conic-gradient(from 222deg at 52% 47%,color-mix(in srgb,var(--storm) 85%,var(--mist)) 0%,color-mix(in srgb,var(--mist) 25%,var(--frost)) 12%,color-mix(in srgb,var(--storm) 15%,var(--mist)) 21%,var(--storm) 31%,color-mix(in srgb,var(--frost) 90%,var(--white)) 41%,color-mix(in srgb,var(--storm) 40%,var(--mist)) 50%,color-mix(in srgb,var(--apricot) 90%,var(--white)) 61%,color-mix(in srgb,var(--frost) 40%,var(--white)) 75%,color-mix(in srgb,var(--storm) 60%,var(--mist)) 85%,color-mix(in srgb,var(--mist) 90%,var(--frost)) 100%) border-box;
  box-shadow:
    inset 0 1px 3px color-mix(in srgb,var(--white) 28%,transparent),
    inset 0 -3px 8px color-mix(in srgb,var(--black) 30%,transparent),
    0 1px 1px color-mix(in srgb,var(--white) 36%,transparent),
    0 7px 20px color-mix(in srgb,var(--ink) 18%,transparent),
    0 0 0 1px color-mix(in srgb,color-mix(in srgb,var(--storm) 60%,var(--mist)) 16%,transparent);
  color:var(--frost);
  font-family:var(--body),sans-serif;
  font-size:12px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:.025em;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .27s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .3s ease,color .3s ease;
}
.shiny-button::before, .liquid-cta::before, .nav-contact::before, .back-btn::before, a.pill::before{
  content:'';
  position:absolute;
  inset:2px 5% auto 5%;
  height:46%;
  border-radius:100% 100% 50% 50% / 95% 95% 40% 40%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--white) 36%,transparent),color-mix(in srgb,color-mix(in srgb,var(--mist) 60%,var(--frost)) 15%,transparent) 35%,transparent 100%);
  filter:blur(.7px);
  opacity:.88;
  pointer-events:none;
  z-index:0;
  transition:opacity .3s ease;
}
.shiny-button::after, .liquid-cta::after, .nav-contact::after, .back-btn::after, a.pill::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:inherit;
  border:1px solid color-mix(in srgb,color-mix(in srgb,var(--mist) 10%,var(--frost)) 22%,transparent);
  border-bottom-color:color-mix(in srgb,var(--coral) 35%,transparent);
  pointer-events:none;
  z-index:0;
}
.shiny-button > .liquid-label, .liquid-cta > .liquid-label, .nav-contact > .liquid-label,
.back-btn > .liquid-label, a.pill > .liquid-label,
.shiny-button > .action-glyph, .liquid-cta > .action-glyph, .nav-contact > .action-glyph,
.back-btn > .action-glyph, a.pill > .action-glyph {
  position:relative;z-index:1;
}
.shiny-button:hover, .shiny-button:focus-visible,
.liquid-cta:hover, .liquid-cta:focus-visible,
.nav-contact:hover, .nav-contact:focus-visible,
.back-btn:hover, .back-btn:focus-visible,
a.pill:hover, a.pill:focus-visible{
  transform:translateY(-2px);
  color:var(--white);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--white) 13%,transparent), inset 0 -2px 8px color-mix(in srgb,var(--black) 30%,transparent),
    0 9px 24px color-mix(in srgb,var(--ink) 28%,transparent), 0 0 16px color-mix(in srgb,var(--coral) 17%,transparent);
}
.shiny-button:hover::before,.shiny-button:focus-visible::before,
.liquid-cta:hover::before,.liquid-cta:focus-visible::before,
.nav-contact:hover::before,.nav-contact:focus-visible::before,
.back-btn:hover::before,.back-btn:focus-visible::before,
a.pill:hover::before,a.pill:focus-visible::before{opacity:0;}
.shiny-button:active, .liquid-cta:active, .nav-contact:active, .back-btn:active, a.pill:active{
  transform:translateY(1px);box-shadow:inset 0 3px 8px color-mix(in srgb,var(--black) 35%,transparent),0 2px 5px color-mix(in srgb,var(--black) 20%,transparent);
}
/* Outline CTA is a less assertive frosted liquid capsule, not a flat outline. */
.shiny-button--outline{
  background:
    linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--ink) 50%,var(--storm)) 80%,transparent),color-mix(in srgb,var(--ink) 88%,transparent)) padding-box,
    conic-gradient(from 210deg,color-mix(in srgb,var(--storm) 55%,var(--mist)),color-mix(in srgb,var(--mist) 15%,var(--frost)),color-mix(in srgb,var(--storm) 50%,var(--mist)),var(--white) 36%,color-mix(in srgb,var(--storm) 75%,var(--mist)),color-mix(in srgb,var(--apricot) 90%,var(--white)),color-mix(in srgb,var(--mist) 30%,var(--frost)),color-mix(in srgb,var(--storm) 70%,var(--mist))) border-box;
  color:var(--frost);
}
/* Tiny chrome pill in the navigation */
.nav-contact,.back-btn{min-height:42px;padding:10px 17px;font-size:11px;gap:10px}

/* Media-control glyph: PLAY at rest -> FAST-FORWARD on hover and keyboard focus. */
.action-glyph{position:relative;display:inline-grid;place-items:center;width:21px;height:21px;flex:none;line-height:0;vertical-align:middle;color:inherit;transform-origin:center}
.action-glyph svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;stroke:none;transition:opacity .22s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.action-glyph__play{opacity:1;transform:translateX(0) scale(1)}
.action-glyph__fast{opacity:0;transform:translateX(-3px) scale(.83)}
:is(a,button):is(:hover,:focus-visible) .action-glyph__play{opacity:0;transform:translateX(3px) scale(.80)}
:is(a,button):is(:hover,:focus-visible) .action-glyph__fast{opacity:1;transform:translateX(0) scale(1)}
.action-glyph--previous{transform:rotate(180deg)}

/* Portfolio controls retain the physical chrome camera-button casing. */
.round-arrow{display:grid;place-items:center}
.round-arrow .action-glyph{z-index:2;width:21px;height:21px;color:var(--frost);filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--black) 50%,transparent))}
.round-arrow:hover .action-glyph, .round-arrow:focus-visible .action-glyph{color:color-mix(in srgb,var(--apricot) 70%,var(--white))}
.round-arrow:disabled .action-glyph{opacity:.45}

/* All service card affordances are now play/forward glyphs (no rotating arrow). */
.service-tile .circle-arrow{transform:none;background:var(--frost);color:var(--ink)}
.service-tile:hover .circle-arrow,.service-tile:focus-visible .circle-arrow{transform:translateY(-2px);background:var(--coral)}
.circle-arrow .action-glyph{width:18px;height:18px}
/* Text links, navigation link arrows and editorial cards share the same sign language. */
.text-link .action-glyph,.menu-arrow .action-glyph,.related-link .action-glyph,
.archive-card .action-glyph,.vhs-nav .action-glyph{width:15px;height:15px}
.menu-arrow{display:inline-grid;place-items:center}
.related-link .action-glyph{width:23px;height:23px}
.lightbox__btn .action-glyph{width:17px;height:17px}
/* Prevent a font fallback from misaligning navigation labels */
.liquid-label{display:inline-block;line-height:1.3}

@media(max-width:500px){
  .shiny-button,.liquid-cta,a.pill{gap:10px;padding:12px 17px;min-height:48px;font-size:10px}
  .nav-contact,.back-btn{min-height:40px}
  .action-glyph{width:17px;height:17px}
  .round-arrow .action-glyph{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
 .action-glyph svg,.shiny-button,.liquid-cta,.nav-contact,.back-btn,a.pill,
 .shiny-button::before,.liquid-cta::before,.nav-contact::before,.back-btn::before,a.pill::before{transition:none!important}
}