@font-face {
    font-family: MetropolisBold;
    src: url(../studio/fonts/MetropolisBold.otf);
}

:root{
  --shift: 22px;
  --radius: 22px;
  --speed: 260ms;
  --ease: cubic-bezier(.2,.9,.2,1);
  --brand: #260077;
}

*{ box-sizing:border-box; }
html,body{
    height: 100%;
    margin: 0;
}

body{
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: url("../images/starfield.jpg") center/cover no-repeat;
    color: #fff;
    overflow: hidden;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Portal Header */
.portal-header{
    text-align: center;
    padding: clamp(12px, 2vw, 24px);
    z-index:10;
}
.portal-header h1{
    margin: 0;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: 0.04em;
    font-family: MetropolisBold, serif;
}
/* Portal Main Content */
.portal{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.panel{
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transform: translateX(0);
    transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease);
}
/* Portal Footer */
.portal-footer{
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,.10);
    text-align: center;
    padding: clamp(10px, 2vw, 18px);
    font-size: clamp(13px, 1.2vw, 16px);
    opacity: 0.85;
    z-index: 10;
}
.portal-footer p{
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
    padding: 0 12px;
    margin: 0 auto;
    max-width: 70ch;
}

/* Optional background vibes (swap to your art) */
.panel--studio{
    background: radial-gradient(1100px 700px at 20% 35%, rgba(120,80,255,.22), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%), #070716;
}
.panel--store{
    background: radial-gradient(1100px 700px at 80% 35%, rgba(0,200,255,.18), transparent 60%), linear-gradient(225deg, rgba(255,255,255,.06), transparent 40%), #06121a;
}

.panel__shade{
    position: absolute; inset:0;
    background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,.70));
    z-index: 1;
}

.panel__content{
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 5vw, 64px);
    gap: 10px;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.panel__title{
    margin: 0;
    font-size: clamp(42px, 5vw, 84px);
    letter-spacing: .02em;
}

.panel__tagline{
    margin: 0;
    max-width: 32ch;
    font-size: clamp(16px, 1.5vw, 20px);
    opacity: .92;
}

.panel__cta{
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    opacity: .95;
}

/* Preview layer */
.panel__preview{
    position: absolute;
    inset: clamp(16px, 2.5vw, 28px);
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    transform: scale(.985);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
    filter: saturate(1.05) contrast(1.03);
}

/* The iframe is “live”, but not interactive (click still goes to the panel link) */
.panel__iframe{
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(.92);
    transform-origin: 50% 50%;
    pointer-events: none;
    background: #0b0d12;
}

/* Hover effects */
/* Studio */
.panel--studio:hover{
    transform: translateX(calc(var(--shift) * -1));
    filter: brightness(1.06);
}
.panel--studio:hover .panel__title,
.panel--studio:hover .panel__cta{
    color: #000;
    text-shadow: 0 3px 12px rgba(255,255,255,.55);
}
/* Store */
.panel--store:hover{
    transform: translateX(var(--shift));
    filter: brightness(1.06);
}
.panel--store:hover .panel__title,
.panel--store:hover .panel__cta{
    color: #fff;
    text-shadow: 0 3px 16px rgba(0,0,0,.95);
}
.panel--store:hover .panel__title{
    -webkit-text-stroke: 1px rgba(38,0,119,.55);
}

.panel:hover .panel__cta{
    border-bottom: 2px solid rgba(38,0,119,.65);
    padding-bottom: 2px;
    width: fit-content;
}
.panel:hover .panel__preview{
    opacity: 1;
    transform: scale(1);
}

/* Keyboard accessibility */
.panel:focus-visible{
    outline: 3px solid rgba(255,255,255,.85);
    outline-offset: -3px;
}

/* Mobile: stack (tap chooses) */
@media (max-width: 860px){
    body{ overflow: auto; }
    .portal{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: 100vh; }
    .panel--studio:hover, .panel--store:hover{ transform: none; }
    .portal-header, .portal-footer{ position: static; }
}