/* ============================================================
   Primo Studios — Under Construction
   ============================================================ */

:root {
    --bg:        #0a0a0a;
    --ink:       #f5f1e8;
    --ink-dim:   rgba(245, 241, 232, 0.62);
    --ink-faint: rgba(245, 241, 232, 0.28);
    --accent:    #c8a96a;
    --serif:     'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   Stage layout
   ------------------------------------------------------------ */
.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4.5rem);
    overflow: hidden;
}

/* ------------------------------------------------------------
   Background image + overlays
   ------------------------------------------------------------ */
.bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    filter: grayscale(100%) contrast(1.05) brightness(0.72);
    transform: scale(1.04);
    animation: drift 28s ease-in-out infinite alternate;
}

@keyframes drift {
    from { transform: scale(1.04) translateX(0); }
    to   { transform: scale(1.08) translateX(-1.5%); }
}

.vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.9) 100%),
        linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.35) 35%, rgba(10,10,10,0.85) 100%),
        linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0) 80%);
}

.grain {
    position: absolute;
    inset: -10%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.22;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: grain 1.4s steps(3) infinite;
}

@keyframes grain {
    0%   { transform: translate(0,0); }
    33%  { transform: translate(-1%, 1%); }
    66%  { transform: translate(1%, -1%); }
    100% { transform: translate(0,0); }
}

/* ------------------------------------------------------------
   Brand (top)
   ------------------------------------------------------------ */
.brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--ink-dim);
    opacity: 0;
    animation: fadeIn 1.4s ease 0.2s forwards;
}

.brand-mark { color: var(--ink); }
.brand-sep  { color: var(--accent); }

/* ------------------------------------------------------------
   Hero block
   ------------------------------------------------------------ */
.hero {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 38ch;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    color: var(--accent);
    margin-bottom: 1.8rem;
    opacity: 0;
    animation: fadeIn 1.2s ease 0.5s forwards;
}

.kicker .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(200, 169, 106, 0.55);
    animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 169, 106, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(200, 169, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 169, 106, 0); }
}

.title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.title .line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.title .line:nth-child(1) { animation-delay: 0.6s; }
.title .line:nth-child(2) { animation-delay: 0.85s; }
.title .line:nth-child(3) { animation-delay: 1.1s; }

.title .italic {
    font-style: italic;
    color: var(--accent);
}

.lede {
    margin-top: 1.8rem;
    font-family: var(--sans);
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-dim);
    max-width: 32ch;
    opacity: 0;
    animation: fadeIn 1.2s ease 1.5s forwards;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot {
    position: relative;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 1.4s ease 1.8s forwards;
}

/* ------------------------------------------------------------
   Animations
   ------------------------------------------------------------ */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .bg img { object-position: 70% center; }
    .vignette {
        background:
            linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.4) 30%, rgba(10,10,10,0.92) 100%);
    }
    .hero { max-width: 100%; }
    .brand { font-size: 0.7rem; letter-spacing: 0.28em; }
}

@media (prefers-reduced-motion: reduce) {
    .bg img,
    .grain,
    .kicker .dot,
    .title .line,
    .brand,
    .kicker,
    .lede,
    .foot { animation: none; opacity: 1; transform: none; }
}