/* «Шукаємо креативних людей та партнерів в команду Photobox!» — the shared look.

   Used by the session page (the popup before the Instagram modal, and the in-page card for anyone
   who answered it «Ні, дякую») and by the landing (the card at the top of the partnership section).
   Everything that only the popup needs — the overlay, the panel, its entrance, the two-button row —
   stays in Session.cshtml.

   A container sets three custom properties the layers below read:
     --tm-vis   height of the sculpture's window above the text
     --tm-pad   the container's top padding, so the sculpture centres in that window
     --tm-px / --tm-py   -1…1 tilt / pointer / drag (the popup's script writes them; 0 elsewhere)

   The running animations are transform/opacity only, apart from the title's ink: these sit over
   galleries of full-size photos on mid-range phones. */

/* Everything that is not text or a button.
   The mask is the Safari fix: WebKit lets composited children (the 3D-tilted sculpture) paint past
   overflow: hidden + border-radius, so the corners would poke out of the card on an iPhone. An opaque
   mask forces the rounded clip. On the scene, not the card — on the card it would clip its glow. */
.tm-scene {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    overflow: hidden; border-radius: inherit;
    -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
}

.tm-aurora {
    position: absolute; inset: -35%;
    background:
        radial-gradient(38% 30% at 32% 30%, rgba(108,99,255,.50), transparent 70%),
        radial-gradient(30% 26% at 72% 38%, rgba(34,211,238,.28), transparent 70%),
        radial-gradient(42% 34% at 50% 62%, rgba(217,70,239,.22), transparent 72%);
    animation: tm-drift 22s ease-in-out infinite alternate;
    /* The deepest layer: slides AGAINST the tilt. */
    translate: calc(var(--tm-px, 0) * -18px) calc(var(--tm-py, 0) * -14px);
}
@keyframes tm-drift {
    0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(3%, 3%, 0) rotate(12deg) scale(1.08); }
    100% { transform: translate3d(-2%, 4%, 0) rotate(-8deg) scale(1.02); }
}

/* The sculpture, centred in the window above the text. The nearest layer: it rolls WITH the tilt
   while the aurora slides against it, and turns towards it (.tm-tilt) — which, together with the
   popup's frame scrub, is what makes it read as an object in space rather than a picture sliding. */
.tm-stage {
    position: absolute; left: 50%; top: calc(var(--tm-pad) + var(--tm-vis) / 2);
    width: calc(var(--tm-vis) * 1.35); aspect-ratio: 1;
    translate: calc(-50% + var(--tm-px, 0) * 26px) calc(-50% + var(--tm-py, 0) * 20px);
}
.tm-tilt {
    position: absolute; inset: 0;
    transform: perspective(900px) rotateY(calc(var(--tm-px, 0) * 16deg)) rotateX(calc(var(--tm-py, 0) * -13deg));
}
.tm-stage-in { position: absolute; inset: 0; }

.tm-float { position: absolute; inset: 0; animation: tm-float 7s ease-in-out infinite; }
@keyframes tm-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
    50%      { transform: translate3d(0, -3.2%, 0) rotate(4deg) scale(1.035); }
}

/* Soft light pooling under the object — a gradient, not a blur, so it costs nothing. */
.tm-glow {
    position: absolute; inset: 8%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(139,132,255,.55), rgba(108,99,255,.16) 55%, transparent);
    animation: tm-breathe 7s ease-in-out infinite;
}
@keyframes tm-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.04); } }

/* A halo ring laid flat under the object, with one spark riding it. */
.tm-halo {
    position: absolute; left: 50%; top: 66%; width: 74%; aspect-ratio: 1;
    /* Lags behind the object a little, so the object seems to hover above it. */
    translate: calc(-50% + var(--tm-px, 0) * -10px) calc(-50% + var(--tm-py, 0) * -6px);
    transform: perspective(900px) rotateX(76deg);
}
.tm-halo i {
    position: absolute; inset: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    animation: tm-orbit 14s linear infinite;
}
.tm-halo i + i { inset: 13%; box-shadow: inset 0 0 0 1px rgba(125,231,255,.12); animation-duration: 22s; animation-direction: reverse; }
.tm-halo i::after {
    content: ''; position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 10px 3px rgba(185,180,255,.9), 0 0 26px 8px rgba(108,99,255,.6);
}
.tm-halo i + i::after { background: #bdf4ff; box-shadow: 0 0 8px 2px rgba(125,231,255,.9); }
@keyframes tm-orbit { to { transform: rotate(360deg); } }

/* Placeholder until (or instead of) the rendered frames: an iridescent glass bead. The colour turns
   inside it; the highlight and the shading stay put, the way light would. */
.tm-orb {
    position: absolute; inset: 29%; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 90px 10px rgba(108,99,255,.35);
    transition: opacity .9s ease;
}
.tm-orb::before {
    content: ''; position: absolute; inset: -25%;
    background: conic-gradient(from 0deg, #6C63FF, #22d3ee, #f0abfc, #fde68a, #a78bfa, #6C63FF);
    filter: blur(18px);
    animation: tm-orbit 9s linear infinite;
}
.tm-orb::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 33% 27%, rgba(255,255,255,.95) 0 2.5%, rgba(255,255,255,.45) 7%, transparent 22%),
        radial-gradient(circle at 50% 50%, transparent 52%, rgba(3,3,5,.55) 100%);
    box-shadow: inset -22px -30px 60px rgba(3,3,5,.55), inset 12px 16px 36px rgba(255,255,255,.22);
}
.tm-stage.rendered .tm-orb { opacity: 0; }

/* The rendered frames: light-as-alpha WebPs (scripts/gen-team-visual.py), so they add light to the
   scene with plain compositing. No mix-blend-mode on purpose — every animated wrapper above is an
   isolated group, and a blend in there would paint the render's black square over the aurora. */
.tm-frames { position: absolute; inset: 0; }
.tm-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    opacity: 0; transition: opacity 2.4s ease-in-out;
    user-select: none; -webkit-user-drag: none;
}
.tm-frame.on { opacity: 1; }
/* While the tilt drives the frames, the script sets each opacity every frame; the short transition
   smooths the hand-over from the timer's frame and any jitter in the tilt. */
.tm-stage.scrub .tm-frame { transition: opacity .35s linear; }

/* Film grain, and the fall to black that keeps the text legible whatever the render does. */
.tm-scene::before {
    content: ''; position: absolute; inset: 0; z-index: 2; opacity: .06;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tm-scene::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 0%, transparent 44%, rgba(7,7,11,.86) 66%, #07070b 88%);
}

.tm-copy { position: relative; margin-top: var(--tm-vis); }

.tm-title {
    font-size: clamp(1.7rem, 7.6vw, 2.15rem); line-height: 1.04; font-weight: 300; letter-spacing: -.03em;
    text-wrap: balance;
}
.tm-title em {
    font-style: normal; font-weight: 600;
    background: linear-gradient(100deg, #c7c3ff 0%, #8ee9ff 26%, #ffc2f0 52%, #c7c3ff 78%, #8ee9ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: tm-ink 7s linear infinite;
}
@keyframes tm-ink { to { background-position: -200% 0; } }

.tm-btn {
    height: 54px; border: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: inherit; font-size: 1rem; letter-spacing: .01em; line-height: 1;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.tm-btn:active { transform: scale(.97); }
.tm-btn:focus-visible { outline: 2px solid #8ee9ff; outline-offset: 3px; }

.tm-join {
    position: relative; overflow: hidden;
    padding: 0 .4rem 0 1rem;
    background: #fff; color: #050507; font-weight: 600;
    box-shadow: 0 14px 44px -10px rgba(150,140,255,.75), inset 0 -1px 0 rgba(0,0,0,.08);
}
.tm-join > span:first-child { flex: 1; text-align: center; }
/* A glint sweeping across the pill every few seconds. */
.tm-join::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(160,150,255,.35) 40%, rgba(142,233,255,.35) 60%, transparent);
    transform: skewX(-18deg);
    animation: tm-glint 4.2s cubic-bezier(.6,0,.2,1) 2s infinite;
}
@keyframes tm-glint { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.tm-arrow {
    position: relative; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: #050507; color: #fff;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.tm-arrow svg { width: 18px; height: 18px; }
.tm-join:hover .tm-arrow { transform: rotate(-45deg); }

/* ---- the card: the call as a block in a page, with one «Доєднатись» ---- */
.tm-card {
    --tm-vis: 150px; --tm-pad: 1.1rem;
    position: relative; isolation: isolate; overflow: hidden;
    padding: var(--tm-pad) 1.1rem 1.1rem;
    border-radius: 22px; background: #07070b; color: #fff; text-align: left;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -40px rgba(108,99,255,.6);
}
.tm-card[hidden] { display: none; }
.tm-card .tm-title { font-size: clamp(1.45rem, 6.2vw, 1.8rem); }
.tm-card .tm-scene::after {
    background: linear-gradient(180deg, transparent 0%, transparent 34%, rgba(7,7,11,.86) 56%, #07070b 80%);
}
/* Full width on a phone, capped on anything wider: a 680 px pill with the label adrift in the middle
   and the arrow a hand-span away reads as a stretched mistake, not a button. */
.tm-join-wide { display: flex; width: 100%; max-width: 360px; margin-top: 1.1rem; }
/* Centred variant, for a page whose sections are centred (the landing). */
.tm-card.tm-center { text-align: center; }
.tm-card.tm-center .tm-join-wide { margin-left: auto; margin-right: auto; }
/* Animations run only while the card is on screen — the page's script toggles .tm-live. */
.tm-card:not(.tm-live) *, .tm-card:not(.tm-live) *::before, .tm-card:not(.tm-live) *::after {
    animation-play-state: paused !important;
}
@media (min-width: 560px) {
    .tm-card { --tm-vis: 190px; --tm-pad: 1.4rem; padding: var(--tm-pad) 1.5rem 1.5rem; }
    .tm-card .tm-title { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-frame { transition: none !important; }
    .tm-aurora, .tm-float, .tm-glow, .tm-halo i, .tm-orb::before,
    .tm-title em, .tm-join::before { animation: none !important; }
}