/*
  "Try It Yourself" — the invitation, and the reveal it triggers.

  Loaded only by the welcome route, so a wall shown anywhere else is untouched by every rule here.
  Token values mirror gallery.css, which mirrors Prism, rather than importing either.

  It always sits at the top, never the bottom:
    most screens  top-right corner, level with the brand, handing the corner to the toolbar while
                  it is up. Its size follows the shorter side of the screen (vmin), capped by the
                  width (vw) so it keeps to one line in the half of the top edge the brand leaves;
                  one rule scales from a phone on its side to a 4K wall, upright or not.
    narrow        too little width to share the top edge, so it sits right below the brand, wide.
                  gallery-tryit.js measures where the brand ends (--cta-below).
*/

.gk {
    /* 2.5vw keeps "Discover your next look" on one line inside the corner's 42vw. */
    --cta-font: min(clamp(1.05rem, 0.55rem + 1.9vmin, 2.1rem), 2.5vw);
    --cta-edge-x: max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-right, 0px));
    --cta-edge-y: max(clamp(0.9rem, 2.6vmin, 2rem), env(safe-area-inset-top, 0px));
    --cta-blue: #2563eb;
    --cta-blue-deep: #1a46b8;
}

.gk-tryit {
    position: absolute;
    top: var(--cta-edge-y);
    right: var(--cta-edge-x);
    /* Never wider than the half of the top edge the brand leaves free. */
    max-width: min(42vw, 40rem);
    /* Above the chrome it shares a corner with, below the focused spot it opens. */
    z-index: 40;
    transition: opacity 0.34s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    animation: gk-tryit-arrive 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The brand gives up the other half of the top edge to the invitation, upright or not. */
.gk:has(.gk-tryit) .gk-brand {
    max-width: min(50vw, 46rem);
}

/*
  The toolbar takes this corner over while it is up (and, on a narrow screen, the space under the
  brand). The guest is never left without a way in for long: the toolbar withdraws the moment
  anything else on the screen is touched. No fill from the arrival animation, or its final opacity
  would outrank this one; it plays again when the corner is handed back.
*/
.gk-tryit.is-yielded {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gk-tryit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    gap: calc(var(--cta-font) * 0.75);
    padding: calc(var(--cta-font) * 0.42) calc(var(--cta-font) * 0.42) calc(var(--cta-font) * 0.42) calc(var(--cta-font) * 1.05);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--cta-blue), var(--cta-blue-deep));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 2px rgba(4, 9, 22, 0.4),
        0 10px 30px -6px rgba(16, 52, 160, 0.65),
        0 22px 48px -18px rgba(4, 9, 22, 0.8);
    color: var(--text, #f4f7ff);
    font-family: inherit;
    font-size: var(--cta-font);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: gk-tryit-invite 4.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s infinite;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

/*
  A sheen that crosses the glass now and then. This has to catch an eye from across a room without
  ever becoming the loudest thing in it, so it is a slow pass of light rather than a pulse, and it
  moves by transform alone so it costs the wall's render loop nothing.
*/
.gk-tryit-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.26) 48%, rgba(255, 255, 255, 0.08) 56%, transparent 70%);
    transform: translateX(-120%);
    animation: gk-tryit-sheen 4.8s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
    pointer-events: none;
}

.gk-tryit-label {
    display: flex;
    align-items: center;
    min-width: 0;
}

.gk-tryit-title {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(4, 9, 22, 0.25);
}

.gk-tryit-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--cta-blue-deep);
    box-shadow: 0 2px 8px rgba(4, 9, 22, 0.25);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.gk-tryit-chev svg {
    width: 50%;
    height: 50%;
}

@media (hover: hover) {
    .gk-tryit-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.6);
        filter: brightness(1.06);
        animation-play-state: paused;
    }

    .gk-tryit-btn:hover .gk-tryit-chev {
        transform: translateX(3px);
    }
}

.gk-tryit-btn:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

.gk-tryit-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* --------------------------------------------------------------- upright: larger, still on top */

@media (orientation: portrait) {
    .gk {
        /* Upright screens are read from further back (kiosks) or held closer (phones); both want
           the invitation larger against the shorter side, as far as the corner's width allows. */
        --cta-font: min(clamp(1.15rem, 0.5rem + 3.1vmin, 3rem), 2.5vw);
    }
}

/* ------------------------------------------------------ narrow: right below the brand, wide */

@media (max-width: 40rem) {
    .gk {
        --cta-font: clamp(1.05rem, 0.5rem + 3.1vmin, 1.6rem);
    }

    .gk:has(.gk-tryit) .gk-brand {
        max-width: 100%;
    }

    .gk-tryit {
        top: calc(var(--cta-below, 8rem) + clamp(0.6rem, 2vmin, 1rem));
        left: max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-left, 0px));
        right: var(--cta-edge-x);
        max-width: none;
        display: flex;
    }

    .gk-tryit-btn {
        width: min(100%, 22em);
        padding-top: calc(var(--cta-font) * 0.5);
        padding-bottom: calc(var(--cta-font) * 0.5);
    }

    .gk-tryit-chev {
        width: 2.1em;
        height: 2.1em;
    }
}

/* A phone on its side: little height to spare, so the invitation keeps to one compact line. */
@media (orientation: landscape) and (max-height: 30rem) {
    .gk {
        --cta-font: clamp(0.95rem, 0.5rem + 2.2vmin, 1.25rem);
    }

    .gk-tryit-title {
        white-space: nowrap;
    }
}

@keyframes gk-tryit-invite {
    /* The scale property, not transform, so hover and press can still move the button mid-breath. */
    0%, 76%, 100% { scale: 1; }
    84% { scale: 1.022; }
}

@keyframes gk-tryit-sheen {
    0%, 62% { transform: translateX(-120%); }
    86%, 100% { transform: translateX(120%); }
}

@keyframes gk-tryit-arrive {
    from { opacity: 0; translate: 0 0.6rem; }
    to { opacity: 1; translate: 0 0; }
}

/* --------------------------------------------------------------- the invitation, once spent */

/*
  Nothing else about the wall changes during a reveal. The mosaic, the chrome, the hint and the
  status line all stay exactly where they are and go on being drawn — the kiosk grows over them out
  of one of the wall's own tiles, so there is nothing to move out of its way. The one exception is
  this button: it has been pressed, and leaving it sitting there while the kiosk arrives reads as an
  invitation that did not take. It fades where it stands; moving it would read as the button
  sliding away from the guest's finger. The arrival animation is dropped so its held final opacity
  does not outrank this one.
*/
.gk-tryit.is-spent {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .gk-tryit,
    .gk-tryit-btn,
    .gk-tryit-glow {
        animation: none;
    }

    .gk-tryit {
        transition-duration: 0.2s;
    }
}