/* Press shine: Yazio's button ripple (their Yettie button, yazio.com CTAs and the web onboarding's Next), copied 1:1.
   On press a blurred disc is dropped under the pointer, centred on it, as wide as the button's longer side; it grows
   from scale 0 to 2 over .5s ease-out at 20% opacity, clipped to the button. On release the growth keeps running and a
   .5s ease-out fade to 0 starts alongside it; the disc is removed 1s after release. press.js adds the disc.
   Hosts: the selector list below (kept in sync with press.js) or any element with [data-press]. Ink colour per host via
   --press-ink: white on orange and black, a warm grey on white. */
.au-social, .au .oj-cta, .au-mail a, .au-via button, .au-region, [data-press] {
  --press-ink: #7A6A58;
  position: relative; overflow: hidden; isolation: isolate; /* clip the disc to the pill; the disc sits under the label */
}
.au-apple, .au .oj-cta, [data-press="light"] { --press-ink: #fff; }
[data-press="dark"] { --press-ink: #7A6A58; }

oj-ink.press-ink {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: var(--press-ink); opacity: .2; filter: blur(16px);
  transform: scale(0); animation: press-ink-scale .5s ease-out forwards;
}
oj-ink.press-ink.is-out { animation: press-ink-scale .5s ease-out forwards, press-ink-fade .5s ease-out forwards; }
@keyframes press-ink-scale { to { transform: scale(2); } }
@keyframes press-ink-fade { to { opacity: 0; } }

/* Reduced motion: no shine. The same tint covers the button at once while it is held and goes at once on release. */
oj-ink.press-ink.is-still { inset: 0; width: auto !important; height: auto !important; border-radius: inherit; filter: none; transform: none; animation: none; }

/* Yazio's sink: each button sits on a 4px base in a deeper tone of its own colour and sinks into it while pressed
   (translateY(.25rem), .2s cubic-bezier(.4, 0, .2, 1)), the shine spreading as it goes. */
.au .au-social, .au .au-mail a, .au .oj-cta {
  margin-bottom: 4px !important; transform: translateY(0) !important;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), background-color .15s ease !important; }
.au .au-social.au-google, .au .au-mail a { box-shadow: 0 4px 0 #E0D8CD !important; }
.au .au-social.au-apple { background: #1C1C1E !important; box-shadow: 0 4px 0 #000 !important; }
.au .oj-cta { box-shadow: 0 4px 0 #C4561A !important; }
.au .au-social:active, .au .au-mail a:active, .au .oj-cta:active {
  transform: translateY(4px) !important; box-shadow: 0 0 0 transparent !important; }
.au .oj-cta[disabled]:active, .au .au-social[disabled]:active { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .au .au-social, .au .au-mail a, .au .oj-cta { transition: none !important; } }

/* The popup's buttons share the site gloss (cta.css): orange for the call to action, ink for Apple, white for Google
   and the mail links. No hover change; press settles 1px and tucks the shadow, with the shine. */
.au .oj-cta, .au .au-social, .au .au-mail a { margin-bottom: 0 !important; border: 0 !important; border-radius: 999px !important; filter: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important; }
.au .oj-cta { background: var(--gl-orange) !important; box-shadow: var(--gl-orange-sh) !important; }
.au .au-social.au-apple { background: var(--gl-ink) !important; box-shadow: var(--gl-ink-sh) !important; }
.au .au-social.au-google, .au .au-mail a { background: var(--gl-white) !important; box-shadow: var(--gl-white-sh) !important; }
.au .oj-cta:hover, .au .au-social:hover, .au .au-mail a:hover { filter: none !important; }
.au .oj-cta:hover { box-shadow: var(--gl-orange-sh) !important; }
.au .au-social.au-apple:hover { box-shadow: var(--gl-ink-sh) !important; }
.au .au-social.au-google:hover, .au .au-mail a:hover { box-shadow: var(--gl-white-sh) !important; }
.au .oj-cta:active, .au .au-social:active, .au .au-mail a:active { transform: translateY(1px) !important; filter: none !important; }
.au .oj-cta:active { box-shadow: var(--gl-orange-sh-on) !important; }
.au .au-social.au-apple:active { box-shadow: var(--gl-ink-sh-on) !important; }
.au .au-social.au-google:active, .au .au-mail a:active { box-shadow: var(--gl-white-sh-on) !important; }

/* Hover: nothing changes. auth.css still flattened the orange face on hover; hold every face as it is at rest. */
.au .oj-cta:hover, .au .oj-cta:focus { background: var(--gl-orange) !important; box-shadow: var(--gl-orange-sh) !important; }
.au .au-social.au-apple:hover { background: var(--gl-ink) !important; }
.au .au-social.au-google:hover, .au .au-mail a:hover { background: var(--gl-white) !important; }
.oj-cta:hover { background: var(--gl-orange) !important; box-shadow: var(--gl-orange-sh) !important; }
.oj-link:hover { background: var(--gl-ink) !important; box-shadow: var(--gl-ink-sh) !important; }

/* "Check your inbox": centred in the pane (the form screen sits on the bottom; this one shouldn't), and the envelope
   tile without its orange glow or ledge. */
.au-stage:has(.au-step--sent:not([hidden])) { margin: auto !important; }
.au-env { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important; }

/* Hover: a soft tint over the face that eases in (darker on orange and white, lighter on ink), keeping the gloss.
   Labels tighter, as the rest of the popup. */
.au .oj-cta, .au .au-social, .au .au-mail a { letter-spacing: -.025em !important; font-weight: 600 !important;
  transition: transform .12s ease, box-shadow .2s ease !important; }
@media (hover: hover) {
  .au .oj-cta:hover { box-shadow: inset 0 0 0 999px rgba(120, 40, 0, .08), var(--gl-orange-sh) !important; }
  .au .au-social.au-apple:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07), var(--gl-ink-sh) !important; }
  .au .au-social.au-google:hover, .au .au-mail a:hover { box-shadow: inset 0 0 0 999px rgba(28, 28, 28, .035), var(--gl-white-sh) !important; }
}

/* The same hover on every glossy button site-wide (.oj-cta orange, .oj-link ink), with tighter labels. */
.oj-cta, .oj-link { letter-spacing: -.025em !important; transition: transform .12s ease, box-shadow .2s ease !important; }
@media (hover: hover) {
  .oj-cta:hover { box-shadow: inset 0 0 0 999px rgba(120, 40, 0, .08), var(--gl-orange-sh) !important; }
  .oj-link:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07), var(--gl-ink-sh) !important; }
  .of-cta .oj-cta:hover { box-shadow: inset 0 0 0 999px rgba(28, 28, 28, .04), 0 1px 2px rgba(0, 0, 0, .2) !important; }
}