/* ==========================================================================
   Brandy G — site styles
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Nanum Myeongjo is a Korean font whose space is a full em wide (4x a normal space).
   Leaving the space (U+0020) out of its range makes the browser take a normal one from the serif fallback. */
@font-face { font-family: "Nanum Myeongjo"; src: url("../fonts/nanum-myeongjo.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-001F, U+0021-10FFFF; }
@font-face { font-family: "Viaoda Libre"; src: url("../fonts/viaoda-libre.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alex Brush"; src: url("../fonts/alex-brush.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "BioRhyme"; src: url("../fonts/biorhyme.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Bonheur Royale"; src: url("../fonts/bonheur-royale.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/mrs-saint-delafield.woff2") format("woff2"); font-display: swap; }

/* ---------- Colors & type ---------- */
:root {
  --bg: #121615;
  --bg-footer: #0e1211;
  --text: #e3dfdb;
  --gold: #d9bea3;
  --copper: #d39c7f;
  --cream: #feead5;
  --white: #fdfdfd;
  --peach: #f1b697;

  --font-body: "Nanum Myeongjo", serif;
  --font-display: "Viaoda Libre", serif;
  --font-script: "Alex Brush", cursive;
  --font-button: "BioRhyme", serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: var(--text);
  font: 500 14px/27px var(--font-body);
  letter-spacing: 1px;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 0.8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.button {
  display: inline-block;
  padding: 18px 44px;
  border-radius: 80px;
  background: var(--gold);
  color: var(--bg);
  font: 500 14px/1 var(--font-button);
  letter-spacing: 5px;
  text-transform: lowercase;
  text-align: center;
  transition: opacity 0.3s;
}
.button:hover { opacity: 0.85; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 10;
  height: 66px;
  margin-bottom: -66px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-nav { display: flex; gap: 58px; }

.site-nav a {
  font: 500 18px/1 var(--font-display);
  text-transform: lowercase;
  color: var(--white);
  transition: color 0.3s;
}
.site-nav a:hover { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer {
  padding: 60px 10px;
  background: var(--bg-footer);
  text-align: center;
}

.footer-name {
  margin-bottom: 20px;
  font: 400 25px/20px var(--font-button);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
}
.footer-nav a {
  font: 500 18px/38px var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-nav a[aria-current="page"], .footer-nav a:hover { color: var(--copper); }

.footer-separator { width: 145px; margin: 20px auto 0; }

/* ---------- Social icons ---------- */
.social { display: flex; justify-content: center; gap: 0; }

.social a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.icon {
  width: 12px;
  height: 12px;
  background: var(--copper);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon-facebook  { --icon: url("../images/icons/facebook.svg"); }
.icon-twitter   { --icon: url("../images/icons/twitter.svg"); }
.icon-youtube   { --icon: url("../images/icons/youtube.svg"); }
.icon-instagram { --icon: url("../images/icons/instagram.svg"); }
.icon-snapchat  { --icon: url("../images/icons/snapchat.svg"); }
.icon-twitch    { --icon: url("../images/icons/twitch.svg"); }

/* Large version (Get in touch): gold outline rings that fill gold on hover, to match the email button */
.social-large { justify-content: flex-start; gap: 10px; }
.social-large a {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(217, 190, 163, 0.55);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}
.social-large .icon { width: 20px; height: 20px; background: var(--gold); transition: background-color 0.3s; }
.social-large a:hover { background: var(--gold); border-color: var(--gold); }
.social-large a:hover .icon { background: var(--bg); }

/* ---------- Scroll animations (see main.js) ---------- */
[data-animate] { opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; }
[data-animate="fade-left"]  { transform: translateX(-60px); }
[data-animate="fade-right"] { transform: translateX(60px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="slide-left"] { transform: translateX(-100%); }
[data-animate="zoom-in"]    { transform: scale(0.6); }
[data-animate].is-visible   { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Home
   ========================================================================== */
.hero {
  position: relative;
  background: var(--bg);
}
/* The video's lower third melts into the page background, so the heading rises out of it
   instead of sitting in a separate block */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(18, 22, 21, 0.7) 82%, var(--bg));
  pointer-events: none;
}
.hero-name { z-index: 1; }

/* Sized to the video's own 16:9 shape so the whole frame shows at any width
   (a fixed height cropped off the top and bottom on wide screens) */
.hero video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Large screens: a bit over half the full 16:9 height, so "How do you take your Brandy?" and the arrows
   show without scrolling. Her face sits in the top third of every shot, so the crop is anchored
   near the top and mostly trims legs and window ledge. */
@media (min-width: 1024px) {
  .hero video { aspect-ratio: auto; height: max(480px, 32vw); object-position: center 15%; }
}

.hero-name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 90px/1 var(--font-script);
  letter-spacing: 4px;
  color: var(--cream);
  /* soft gold glow, plus a drop shadow matching the cards and photos */
  text-shadow: 0 0 8px rgba(249, 159, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: opacity 1.2s ease;
}
/* A few seconds after it types out, the name fades away so the video plays clean (main.js) */
.hero-name.is-hidden { opacity: 0; }

.scroll-badge {
  display: block;
  position: relative;
  z-index: 4; /* above the heading block below it */
  overflow: visible; /* the letters sit outside the circle line; clipping them made it look square */
  width: 160px;
  height: 160px;
  margin: -80px auto -80px;
  animation: spin 20s linear infinite;
}
.scroll-badge text {
  font: 500 30px var(--font-body);
  letter-spacing: 1px;
  fill: var(--text);
}
@keyframes spin { to { transform: rotate(360deg); } }

.find-me {
  position: relative;
  z-index: 3; /* arrows overlap the top of the cards below */
  /* Pulled up into the hero's bottom fade; its own background starts clear so the video shows through */
  margin-top: -80px;
  padding: 70px 10px 50px;
  background: linear-gradient(to bottom, transparent, var(--bg) 80px);
  color: var(--gold);
  text-align: center;
}
.find-me-script {
  font: 400 1.25em/0.8 var(--font-script);
  letter-spacing: 1px;
  text-transform: none;
  color: var(--cream);
}

/* Gold pen-stroke arrows: a small loop under the heading, then a sweep down onto each card.
   They draw themselves in when scrolled into view, then drift gently. */
.choose-arrow {
  position: absolute;
  top: calc(100% - 60px);
  width: clamp(140px, 22vw, 320px);
  overflow: visible;
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); /* stays visible over light photos */
  pointer-events: none;
}
.choose-arrow-left { right: calc(50% + 24px); }
.choose-arrow-right { left: calc(50% + 24px); transform: scaleX(-1); }
.choose-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-animate="draw"] { opacity: 1; }
.choose-arrow-left[data-animate="draw"] { transform: none; }
.choose-arrow-right[data-animate="draw"] { transform: scaleX(-1); }
.choose-arrow.is-visible path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease-in-out 0.3s; }
.choose-arrow.is-visible .choose-arrow-head { transition-delay: 1.6s; transition-duration: 0.4s; }
.choose-arrow.is-visible { animation: arrow-drift 3s ease-in-out 2.2s infinite; }
.choose-arrow-right.is-visible { animation-name: arrow-drift-flipped; }
@keyframes arrow-drift { 50% { transform: translateY(6px); } }
@keyframes arrow-drift-flipped { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .choose-arrow path { stroke-dashoffset: 0; }
  .choose-arrow.is-visible { animation: none; }
}

.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 10px 40px 80px;
  overflow-x: clip; /* hides the cards' slide-in start position; shadows still show above and below */
  background: var(--bg);
}

/* Cards float above the page like framed prints: rounded, gold hairline edge, deep soft shadow */
.link-card {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.6), 0 2px 5px -4px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.5s;
}
.link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(217, 190, 163, 0.35);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.5s;
}
.link-card:hover, .link-card:focus-visible {
  box-shadow: 0 10px 16px -10px rgba(0, 0, 0, 0.7), 0 0 30px -10px rgba(217, 190, 163, 0.25);
}
.link-card:hover::after, .link-card:focus-visible::after { border-color: rgba(217, 190, 163, 0.7); }
/* Dimmed so the arrows and titles stand out; the card lights up (and eases in a touch) on hover */
.link-card img {
  width: 100%;
  height: 830px;
  object-fit: cover;
  object-position: center 20%; /* both photos have her face about a quarter of the way down; keep it in the wide crop */
  filter: grayscale(1) brightness(0.6);
  transition: filter 0.5s, transform 0.8s ease;
}
.link-card:hover img, .link-card:focus-visible img { filter: grayscale(1) brightness(0.85); transform: scale(1.03); } /* not full brightness, so the white title still reads */
.link-card .title {
  position: absolute;
  font-size: 55px;
  text-align: center;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
/* "VIP page" / "Free page": an outlined pill that fills gold, with an arrow sliding in, on hover */
.link-card .title small {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  padding: 12px 22px 12px 27px; /* extra left padding balances the letter-spacing */
  border: 1px solid rgba(254, 234, 213, 0.6);
  border-radius: 40px;
  font: 500 16px/1 var(--font-body);
  letter-spacing: 5px;
  color: var(--cream);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
}
.link-card .title small::after {
  content: "→";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  opacity: 0;
  transform: translateX(-8px);
  transition: width 0.35s, opacity 0.35s, transform 0.35s;
}
.link-card:hover .title small, .link-card:focus-visible .title small {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.link-card:hover .title small::after, .link-card:focus-visible .title small::after {
  width: 1.4em;
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   About
   ========================================================================== */
/* Photo + "About Me" on the left, the "Who am I?" bio on the right.
   Stacks (photo first) below 900px. */
.about {
  --wedge: 125px; /* height of the angled video's top wedge (.angled-video::before) */
  position: relative;
  z-index: 2; /* lets the background reach over the angled video's wedge below */
  padding: 140px 40px 160px;
  background: var(--bg);
}
/* Faded black-and-white beach photo behind the whole section. It fades in at the top and runs on down
   through the angled video's top wedge, stopping exactly on the slanted edge. */
.about-bg {
  position: absolute;
  inset: 0 0 calc(-1 * var(--wedge));
  background: url("../images/about-bg.webp") center / cover;
  filter: grayscale(1);
  opacity: 0.14;
  transform: scaleX(-1); /* photo mirrored so her face sits on the right, behind the bio... */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%);
  mask-image: linear-gradient(to bottom, transparent, #000 20%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wedge) * 0.94), 0 100%); /* ...so this is mirrored too, to land on the wedge's slant */
  pointer-events: none;
}
.about-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 100px;
  max-width: 1180px;
  margin: 0 auto;
}
.about-hero { position: relative; }
.about-hero img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px; /* same rounded, shadowed look as the VIP / Free cards */
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.6), 0 2px 5px -4px rgba(0, 0, 0, 0.45);
}
/* Heading hangs off the photo's lower right corner, over her dark top */
.about-hero h1 {
  position: absolute;
  right: -60px;
  bottom: 48px;
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: -4px;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.bio-eyebrow {
  margin-bottom: 20px;
  font: 700 20px/16px Arial, sans-serif;
  letter-spacing: 4px;
  color: var(--copper);
}
.bio-name {
  margin-bottom: 20px;
  font: 400 84px/67px "Bonheur Royale", cursive;
  letter-spacing: 2px;
  color: var(--copper);
}
.bio p {
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 30px;
  color: var(--gold);
}

/* Hover accordion: Entrepreneur / Model / YouTuber */
.roles {
  display: flex;
  height: 850px;
  background: var(--bg);
}
.role {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: flex 0.4s;
}
.role img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.role::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  transition: background-color 0.4s;
}
.role h2 {
  position: relative;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}
.roles:not(:hover) .role:first-child,
.role:hover { flex: 3; }
.roles:not(:hover) .role:first-child h2,
.role:hover h2 { opacity: 1; transform: none; transition-delay: 0.3s; }
.roles:not(:hover) .role:first-child::before,
.role:hover::before { background: rgba(0, 0, 0, 0.1); }

.parallax {
  height: 650px;
  background: url("../images/parallax.webp") center / cover fixed;
}

/* photo | photo | Get in touch. Below 1024px the info drops under the two photos. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* text column gets 40%, room for the email button */
  align-items: center;
  position: relative;
  gap: 48px;
  padding: 60px max(40px, calc((100% - 1360px) / 2)) 140px; /* 80px under the cards + 60px = the 140px below; content tops out at 1360px wide */
  background: var(--bg);
}
/* Faded black-and-white beach photo behind the section, same treatment as the About background */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/contact-bg.webp") center / cover;
  filter: grayscale(1);
  opacity: 0.14;
  transform: scaleX(-1); /* mirrored so she sits on the right, behind Get in touch */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}
.contact > * { position: relative; }
.contact-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 30px 30px;
}
.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  color: var(--gold);
}
/* The address is long, so it trades the buttons' wide letter-spacing for a larger size */
.button-email { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 18px clamp(20px, 2.2vw, 32px); font-size: clamp(13px, 1.15vw, 16px); letter-spacing: 1px; } /* scales down a little on narrower desktops so the address never overflows */
.button-email svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Full-width video with angled edges */
.angled-video {
  position: relative;
  padding: 10px;
  background: var(--bg);
}
.angled-video video {
  width: 100%;
  height: 810px;
  object-fit: cover;
}
.angled-video::before,
.angled-video::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 125px;
  background: var(--bg);
  z-index: 1;
}
.angled-video::before { top: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 6%); }
.angled-video::after { bottom: -1px; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 94%); }


/* ==========================================================================
   Tablet & mobile
   ========================================================================== */
@media (max-width: 1024px) {
  .link-card .title { font-size: 40px; } /* "On the Rocks" stays on one line on tablets */
  .parallax { background-attachment: scroll; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 0 max(40px, calc((100% - 680px) / 2)) 80px; }
  .contact-info { align-items: center; text-align: center; }
  .social-large { justify-content: center; flex-wrap: wrap; }
}

/* About stacks: photo centered, bio centered underneath */
@media (max-width: 899px) {
  /* Photo spans the same width as the VIP / Free cards above; the bio keeps a readable line length */
  .about { padding: 80px 40px 100px; }
  .about-inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .about-hero h1 { right: 32px; }
  .bio { justify-self: center; max-width: 600px; }
  .bio { text-align: center; }
  .bio p { text-align: left; } /* long centered lines read ragged; headings stay centered */
}

@media (max-width: 767px) {
  .title { font-size: 35px; }

  .site-nav { gap: 30px; }
  .site-nav a { font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }

  .footer-nav { gap: 24px; }

  /* Home */
  /* phones: tall crop centered on her, short enough that the heading and arrows show on the first screen */
  .hero video { aspect-ratio: auto; height: clamp(380px, calc(100svh - 230px), 715px); }
  .hero-name { font-size: 50px; }
  .scroll-badge { width: 100px; height: 100px; margin: -50px auto; }
  .find-me { margin-top: -50px; padding: 40px 16px 40px; background: linear-gradient(to bottom, transparent, var(--bg) 50px); }
  .link-grid { gap: 14px; padding: 6px 16px 48px; }
  .link-card { border-radius: 8px; }
  .link-card img { height: 300px; }
  .link-card .title { font-size: 20px; line-height: 1.1; }
  .link-card .title small { margin-top: 10px; padding: 8px 12px 8px 14px; font-size: 11px; letter-spacing: 2px; }
  .find-me .title { line-height: 1.1; }
  .choose-arrow { top: calc(100% - 34px); width: 96px; stroke-width: 4.5; } /* drawn smaller, so a heavier stroke */
  .choose-arrow-left { right: calc(50% + 10px); }
  .choose-arrow-right { left: calc(50% + 10px); }

  /* About */
  /* Photo runs edge to edge; the "Who am I? / Brandy G" headings are dropped and the copy is larger */
  .about { padding: 40px 16px 64px; } /* same side margins as the cards */
  .about-inner { gap: 40px; }
  .about-hero img { border-radius: 8px; }
  .about-hero h1 { right: 20px; bottom: 24px; font-size: 56px; letter-spacing: -2px; }
  .bio { padding: 0 8px; }
  .bio-eyebrow, .bio-name { display: none; }
  .bio p { margin-bottom: 18px; font-size: 16px; line-height: 28px; letter-spacing: 0.3px; color: var(--text); }
  .roles .title { font-size: 35px; }
  .parallax { display: none; } /* phones: hidden for now; spot reserved for future mobile content */
  .contact { gap: 40px; padding: 8px 20px 56px; }
  .contact-photos { gap: 12px; }
  .contact-photos img { border-radius: 0 0 18px 18px; }
  .button-email { gap: 10px; padding: 16px 22px; font-size: 14px; letter-spacing: 0.5px; }
  .button-email svg { width: 16px; height: 16px; }
  .social-large { gap: 8px; }
  .social-large a { width: 42px; height: 42px; } /* all six icons fit on one line */
  .social-large .icon { width: 17px; height: 17px; }
  .angled-video video { height: 729px; }
  .angled-video::before, .angled-video::after { height: 215px; }
  .about { --wedge: 215px; }
}