/* ============================================
   STUDIO SKELTON
   Headings:    Cormorant Garamond (medium/semibold)
   Subheadings: Lato (all-caps, tracked)
   Body:        Lato regular
   Logo:        supplied artwork (Ochre, modified)
   ============================================ */

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

html {
    background-color: #3a1c11; /* prevents white flash while page fades in */
}

body {
    font-family: 'Lato', sans-serif;
    color: #d7c6b4;
    background-color: #3a1c11;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;

    /* Symbol always centered at the bottom */
    display: flex;
    flex-direction: column;

    /* Background fades in first */
    opacity: 0;
    animation: fadein 0.9s ease forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* One easing curve, used everywhere: fast start, long soft landing */
:root {
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* gentler curve for long travels - drifts rather than darts */
    --ease-drift: cubic-bezier(0.5, 0, 0.2, 1);
}

/* Elements rise gently as they fade in */
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- OPENING HOLD ----
   The mark holds centre, then descends into its footer position.
   The brown backdrop lives on ::before so it can clear while the mark
   keeps travelling on top of the revealed page. */
.intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* centre of screen down to the exact centre of the footer mark */
    --pad: clamp(30px, 3.2vw, 44px);
    --mark: clamp(22px, 1.6vw + 12px, 28px);
    --drop: calc(50vh - (var(--pad) + var(--mark) / 2));
}

@supports (height: 100svh) {
    .intro { --drop: calc(50svh - (var(--pad) + var(--mark) / 2)); }
}

.intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #3a1c11;
}

/* Mark is sized to match the footer mark exactly, then scaled up at the start,
   so it lands at precisely the right size with no jump */
.intro img {
    width: var(--mark);
    height: auto;
    opacity: 0;
    position: relative;
    will-change: transform, opacity;
}

.intro--travel { animation: introHide 0s linear 3.45s forwards; }

.intro--travel::before { animation: introOut 1s var(--ease) 1.05s both; }

.intro--travel img { animation: introTravel 3.4s var(--ease-drift) both; }

@keyframes introTravel {
    0%   { opacity: 0;    transform: translateY(0) scale(1.43); }
    12%  { opacity: 0.9;  transform: translateY(0) scale(1.43); }
    26%  { opacity: 0.9;  transform: translateY(0) scale(1.43); }
    85%  { opacity: 0.9;  transform: translateY(var(--drop)) scale(1); }
    100% { opacity: 0;    transform: translateY(var(--drop)) scale(1); }
}

@keyframes introOut {
    to { opacity: 0; }
}

@keyframes introHide {
    to { visibility: hidden; }
}

/* ---- MASK RISE: lines lift from behind an invisible edge ---- */
.reveal {
    display: block;
    overflow: hidden;
}

.reveal > span {
    display: block;
    transform: translateY(105%);
    animation: maskRise 1.15s var(--ease) both;
}

@keyframes maskRise {
    to { transform: translateY(0); }
}

/* Staged reveal, timed to begin as the opening hold dissolves */
.logo-img      { animation: rise 1.15s var(--ease) 1.5s both; }
.tagline       { animation: rise 1.15s var(--ease) 1.75s both; }
.main-nav      { animation: rise 1.15s var(--ease) 1.95s both; }
/* footer mark appears exactly as the travelling mark lands on it */
.footer-symbol { animation: fadein 1s var(--ease) 2.6s both; }

/* About page: title, lead and body all mask-rise, line by line */
.about-title .reveal > span { animation-delay: 0.25s; }

/* Fallback if the line splitter cannot run: the paragraph simply fades in */
.about-body { animation: fadein 1.4s var(--ease) 0.95s both; }

/* Once split into lines, the lines carry the animation instead */
.about-body.split { animation: none; opacity: 1; }

/* A little slack so italic descenders are not clipped by the mask */
.about-body .reveal {
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

/* Returning within the same visit: no opening hold, content starts at once.
   The class is set on <html> before paint, so nothing flashes. */
.no-intro .logo-img      { animation-delay: 0.2s; }
.no-intro .tagline       { animation-delay: 0.42s; }
.no-intro .main-nav      { animation-delay: 0.62s; }
.no-intro .footer-symbol { animation-delay: 0.8s; }
.no-intro .intro         { display: none; }

/* Fade out when navigating to another page */
@keyframes pageout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

body.page-exit {
    animation: pageout 0.35s ease forwards;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    body, .logo-img, .tagline, .main-nav, .footer-symbol,
    .about-wrapper, .about-body, .reveal > span, .intro img {
        opacity: 1;
        animation: none;
        transform: none;
    }
    .intro, .intro::before { display: none !important; }
}

/* PAGE BACKGROUNDS */
body.home  { background-image: url("images/home-bg.webp"); }
body.about { background-image: url("images/about-bg.webp"); }

/* ============ HOME PAGE ============ */

/* Logo + tagline block, centered in the space above the nav */
.center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 0;
}

/* Supplied logo artwork (STUDIO / skelton).
   Fluid: scales smoothly at every width, no jump at any breakpoint. */
.logo-img {
    width: clamp(180px, 14vw + 100px, 360px);
    height: auto;
}

/* tagline */
.tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.86rem, 0.35vw + 0.78rem, 1.12rem);
    letter-spacing: 0.1em;
    text-indent: 0.1em; /* compensates trailing letter-space so text is truly centered */
    margin-top: 1.3rem;
}

/* NAVIGATION - sits low on the page, above the symbol */
.main-nav {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: clamp(0.63rem, 0.3vw + 0.56rem, 0.8rem);
    letter-spacing: 0.16em;
    padding-left: 0.16em; /* compensates trailing letter-space for true centering */
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    margin-bottom: clamp(88px, 8vw + 40px, 124px); /* clears the fixed symbol */
}

.main-nav a {
    color: #d7c6b4;
    text-decoration: none;
    padding-bottom: 4px;
    background: linear-gradient(currentColor, currentColor) bottom center no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.45s ease, opacity 0.45s ease;
}

.main-nav a:hover {
    opacity: 0.85;
    background-size: 100% 1px;
}

.main-nav span {
    margin: 0 clamp(0.34rem, 0.5vw, 0.7rem);
}

/* SYMBOL - pinned to the bottom of the screen, always visible.
   Full-width gradient backdrop so scrolling text fades out
   behind it instead of overlapping. */
.footer-symbol {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(40px, 4vw, 56px) 0 clamp(30px, 3.2vw, 44px);
    text-align: center;
    z-index: 10;
    background: linear-gradient(
        to bottom,
        rgba(58, 28, 17, 0) 0%,
        rgba(58, 28, 17, 0.9) 55%,
        #3a1c11 100%
    );
    pointer-events: none; /* let clicks pass through the gradient */
}

.footer-symbol a {
    pointer-events: auto; /* but keep the symbol clickable */
    display: inline-block;
    opacity: 0.9;
    transition: opacity 0.45s ease;
}

.footer-symbol a:hover {
    opacity: 1;
}

.footer-symbol img {
    width: clamp(22px, 1.6vw + 12px, 28px);
    height: auto;
    display: block;
}

/* ============ ABOUT PAGE ============ */

.about-wrapper {
    flex: 1;
    width: min(680px, 90vw);
    margin-left: 14%;
    margin-right: auto;
    padding-top: 150px;
    padding-bottom: 150px; /* clears the fixed symbol */
}

.about-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.9rem, 0.25vw + 0.82rem, 1.1rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 2.6rem;
}

.about-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.02rem, 0.35vw + 0.94rem, 1.22rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    max-width: 34em; /* ~60 characters, the classic comfortable measure */
    font-feature-settings: "liga" 1, "kern" 1;
}

.about-text p {
    margin-bottom: 1.6rem;
}

/* ============ GALLERY PAGE (dormant) ============
   The gallery page is not live yet. These styles are kept ready
   for when the photography arrives - see gallery.html in git history. */

body.gallery {
    display: block;
    background-image: none;
}

.gallery-home {
    position: fixed;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    opacity: 0.95;
    transition: opacity 0.45s ease;
}

.gallery-home:hover { opacity: 1; }

.gallery-home img { width: clamp(86px, 5vw + 50px, 120px); height: auto; display: block; }

.gallery-feed {
    animation: fadein 1.2s ease 0.3s both;
}

.gallery-item {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    position: relative;
}

.gallery-item img,
.gallery-item .gallery-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(160deg, #46251a 0%, #3a1c11 55%, #2e150c 100%);
}

.gallery-placeholder span {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.45;
}

.gallery-placeholder img {
    width: 40px;
    height: 40px;
    opacity: 0.35;
}

/* ============ RESPONSIVE ============ */
/* Type and logo sizes are fluid above, so this block only handles
   layout differences - no font-size jumps at the breakpoint. */
@media (max-width: 768px) {

    body {
        background-attachment: scroll; /* fixed is unreliable on mobile */
    }

    .about-wrapper {
        padding-top: 80px;
        padding-left: 7%;
        padding-right: 7%;
        margin-left: 0;
        width: 100%;
        padding-bottom: 130px;
    }
}