/* ============================================================
   Hung Trinh — portfolio, horizontal exhibition
   Tailwind (browser build) does the spacing, colour, type and layout.
   This file keeps only what utilities express badly:
     · the sliding rig and its screen-size gates
     · the per-panel glow driven by --gx / --gy
     · type that must shrink with viewport HEIGHT, since one panel = one screen
     · keyframes
   ============================================================ */

/* ---------- brand gradient ---------- */
.grad {
    /* background-origin matters: .btn has a 1px transparent border, and without
       this the gradient smears into that ring and shows as a rim on the caps. */
    background-origin: border-box;
    background-image: linear-gradient(135deg, #c22d08 0%, #fb8b29 50%, #f35703 100%);
}
.grad-text {
    background-image: linear-gradient(120deg, #c22d08 0%, #f35703 45%, #fb8b29 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- the rig ----------
   Stacked is the base state so the page still reads with JavaScript off.
   Sideways only switches on when the script is alive and there is room. */
.panel { padding: 96px 22px 92px; }

@media (min-width: 900px) and (min-height: 600px) {
    html.js .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
    html.js .track { display: flex; height: 100%; }
    html.js .panel {
        flex: none; width: 100vw; height: 100vh; min-height: 0;
        border-bottom: 0; padding: 110px 56px 104px;
    }
    html.js .dots { display: flex; }
}
@media (min-width: 1400px) and (min-height: 600px) {
    html.js .panel { padding: 110px 90px 104px; }
}

/* a soft light sitting in a different corner on each panel */
.panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(620px circle at var(--gx, 78%) var(--gy, 18%),
                                rgba(251, 139, 41, .16), transparent 60%);
}

/* the oversized index number */
.ghost {
    position: absolute; right: 3vw; bottom: 2vh; z-index: 0;
    font-size: min(34vh, 250px); font-weight: 700; line-height: .8; letter-spacing: -.06em;
    color: rgba(62, 62, 62, .035); pointer-events: none; user-select: none;
}

/* ---------- type that has to fit one screen ---------- */
.t-hero  { font-size: min(clamp(52px, 11.5vw, 128px), 21vh); }
.t-title { font-size: min(clamp(34px, 5.6vw, 64px), 11vh); }
.t-close { font-size: min(clamp(36px, 6.5vw, 76px), 15vh); }
.t-lead  { font-size: min(16px, 2.2vh); }
.t-body  { font-size: min(14px, 1.95vh); }
.t-small { font-size: min(12.5px, 1.75vh); }
.t-nv    { font-size: min(25px, 3.4vh); }
.t-nk    { font-size: min(10.5px, 1.5vh); }

/* ---------- portrait glow + floating badges ---------- */
.portrait::before {
    content: ''; position: absolute; inset: -14% -10% -6%;
    background: radial-gradient(circle at 50% 45%, rgba(251, 139, 41, .30),
                                rgba(194, 45, 8, .10) 52%, transparent 72%);
    filter: blur(24px); z-index: 0;
}
.badge-a { left: -30px; top: 50%; animation: bob 5.5s ease-in-out infinite; }
.badge-b { right: -6px; bottom: 15%; animation: bob 5.5s ease-in-out infinite .9s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 480px) { .badge-a, .badge-b { display: none; } }

@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.nudge { animation: nudge 1.9s ease-in-out infinite; }

/* ---------- short laptop windows ----------
   A panel is exactly one screen, so the dense ones run out of room on a short
   window. Trim rather than let content spill past the fold. */
@media (min-width: 900px) and (min-height: 600px) and (max-height: 800px) {
    html.js .panel { padding: 60px 48px 56px; }
    .t-title { font-size: min(clamp(30px, 4.8vw, 54px), 10.5vh); }
    .t-hero  { font-size: min(clamp(46px, 10vw, 110px), 18vh); }
    .t-lead  { font-size: 14px; }
    .t-small { font-size: 11.5px; }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 700px) {
    html.js .panel { padding: 52px 44px 48px; }
    .t-title { font-size: min(clamp(26px, 4.2vw, 46px), 9.5vh); }
    .t-hero  { font-size: min(clamp(40px, 8.5vw, 92px), 15.5vh); }
    .t-lead  { font-size: 13px; }
    .t-body  { font-size: 12.5px; }
    .t-small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .p-in { transform: none !important; opacity: 1 !important; }
}

/* module tiles (Project AXE and XeNow panels)
   Eight tiles two-up on the left, the selected module's detail on the right.
   Labels like "Creative Factory" need ~110px of text, so a tile that was literally
   square would be ~150px tall and four rows would not fit one screen — hence the
   flatter rounded tile. */
.acc-btn { cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s; }
.acc-btn:hover { border-color: rgba(243, 87, 3, .35); transform: translateY(-1px); }
.acc-btn[aria-selected='true'] {
    border-color: rgba(243, 87, 3, .5);
    background: rgba(251, 139, 41, .10);
    color: var(--color-brand-1, #c22d08);
}

.acc-p { animation: accIn .28s ease both; }
html.js .acc-group .acc-p:not(.on) { display: none; }
@keyframes accIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .acc-btn, .acc-p { transition: none; animation: none; } }

/* VARS Viet Nam design pages
   Each thumbnail is the whole page at a small size, shown from the top. On hover it
   slides down to the bottom of the page, so a visitor can skim the full design
   without opening it. top:100% + translateY(-100%) parks the image's bottom edge
   on the frame's bottom edge, whatever the page height is. */
.vars-frame { height: min(176px, 20vh); }
.vars-frame img { transition: top 3.5s ease-in-out, transform 3.5s ease-in-out; }
.vars-shot:hover .vars-frame img,
.vars-shot:focus-visible .vars-frame img { top: 100%; transform: translateY(-100%); }