/* ═══════════════════════════════════════════
   TEATRO AURORA — BASE STYLES
   Variables · Reset · Typography · Utilities
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Syncopate:wght@400;700&family=Lato:wght@300;400&display=swap');

/* ─── VARIABLES ─── */
:root {
  --petrolio:       #0d3b3e;
  --petrolio-dark:  #081f21;
  --petrolio-mid:   #154f53;
  --petrolio-light: #1d6a70;
  --gold:           #c9a84c;
  --gold-light:     #e8c96e;
  --gold-pale:      #f5e6b8;
  --cream:          #f9f3e3;
  --text-light:     rgba(249, 243, 227, 0.85);
  --text-dim:       rgba(249, 243, 227, 0.45);

  --font-display: 'Cormorant Garamond', serif;
  --font-label:   'Syncopate', sans-serif;
  --font-body:    'Lato', sans-serif;

  --transition-fast:   .2s ease;
  --transition-normal: .35s ease;
  --transition-slow:   .6s ease;

  --max-width: 1300px;
  --pad-x: 5%;
}

/* ─── RESET ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background:    var(--petrolio-dark);
  color:         var(--cream);
  font-family:   var(--font-body);
  font-weight:   300;
  overflow-x:    hidden;
  opacity:       0;
  animation:     pageIn .55s ease forwards .04s;
}

body.page-out {
  animation: pageOut .38s ease forwards;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

/* ─── PAGE TRANSITIONS ─── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pageOut {
  to { opacity: 0; transform: translateY(-14px); }
}

/* ─── NOISE OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 900;
  opacity: .5;
}

/* ─── TYPOGRAPHY ─── */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
}
.t-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .5rem;
}
.t-italic { font-style: italic; }
.t-gold   { color: var(--gold); }
.t-gold-light { color: var(--gold-light); }
.t-dim    { color: var(--text-dim); }
.t-light  { color: var(--text-light); }

/* ─── LAYOUT UTILITIES ─── */
.wrap {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--pad-x);
}

.gold-line {
  width:      50px;
  height:     1px;
  background: var(--gold);
  margin:     1.5rem 0;
}

.gold-divider {
  width:      100%;
  height:     1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.2) 30%, rgba(201,168,76,.2) 70%, transparent);
}

/* ─── REVEAL ON SCROLL ─── */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity:   1;
  transform: none;
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spotPulse {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1; }
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ─── BUTTONS ─── */
.btn {
  display:     inline-block;
  font-family: var(--font-label);
  font-size:   .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border:      none;
  transition:  background var(--transition-normal),
               color      var(--transition-normal),
               transform  var(--transition-fast),
               box-shadow var(--transition-normal);
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  padding:    1rem 2.4rem;
  background: var(--gold);
  color:      var(--petrolio-dark);
}
.btn-gold:hover {
  background: var(--gold-light);
  box-shadow: 0 10px 34px rgba(201,168,76,.22);
}

.btn-ghost {
  padding:    1rem 2.4rem;
  background: transparent;
  color:      var(--gold);
  border:     1px solid rgba(201,168,76,.4);
}
.btn-ghost:hover { background: rgba(201,168,76,.1); border-color: var(--gold); }

.btn-sm {
  padding:   .7rem 1.5rem;
  font-size: .5rem;
}

/* ─── PAGE HEADER (inner pages) ─── */
.page-header {
  position: relative;
  padding:  11rem var(--pad-x) 5rem;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--pad-x); right: var(--pad-x);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.3), transparent);
}
.page-header .ph-deco {
  position:    absolute;
  right:       var(--pad-x);
  top:         45%;
  transform:   translateY(-50%);
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   18rem;
  font-weight: 300;
  color:       rgba(201,168,76,.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.page-header .ph-label {
  font-family:    var(--font-label);
  font-size:      .5rem;
  letter-spacing: .5em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1rem;
  opacity: 0;
  animation: fadeUp .7s ease forwards .2s;
}
.page-header .ph-title {
  font-family:   var(--font-display);
  font-size:     clamp(3.5rem, 8vw, 7rem);
  font-weight:   300;
  line-height:   .95;
  opacity: 0;
  animation: fadeUp .8s ease forwards .4s;
}
.page-header .ph-title em {
  font-style: italic;
  color:      var(--gold-light);
}
.page-header .ph-sub {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     1.1rem;
  color:         var(--text-dim);
  margin-top:    1.5rem;
  opacity: 0;
  animation: fadeUp .8s ease forwards .6s;
}

/* ─── FOOTER ─── */
footer {
  padding:     3rem var(--pad-x);
  border-top:  1px solid rgba(201,168,76,.1);
}
.footer-inner {
  max-width: var(--max-width);
  margin:    0 auto;
  display:   flex;
  justify-content: space-between;
  align-items:     center;
}
.footer-logo {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.5rem;
  color:       var(--gold);
}
.footer-copy {
  font-size: .75rem;
  color:     var(--text-dim);
}
.footer-links {
  display:     flex;
  gap:         2rem;
  list-style:  none;
}
.footer-links a {
  font-family:    var(--font-label);
  font-size:      .42rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  text-decoration: none;
  transition:     color var(--transition-normal);
}
.footer-links a:hover { color: var(--gold); }

/* ─── FORM ELEMENTS ─── */
.fg {
  display:        flex;
  flex-direction: column;
  gap:            .4rem;
  margin-bottom:  1rem;
}
.fg label {
  font-family:    var(--font-label);
  font-size:      .42rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--gold);
}
.fg input,
.fg select,
.fg textarea {
  background:  rgba(13, 59, 62, .35);
  border:      1px solid rgba(201,168,76,.18);
  color:       var(--cream);
  font-family: var(--font-body);
  font-size:   .88rem;
  padding:     .85rem 1.1rem;
  outline:     none;
  transition:  border-color var(--transition-normal),
               background   var(--transition-normal);
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--gold);
  background:   rgba(13, 59, 62, .6);
}
.fg textarea         { height: 130px; resize: vertical; }
.fg select option    { background: var(--petrolio-dark); }
.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-header .ph-deco { display: none; }
}