/*
Theme Name: TEC Expression Center
Theme URI: https://tropicanatradefair.com
Author: LyteHosting
Author URI: https://tropicanatradefair.com
Description: Custom cinematic, motion-forward WordPress theme for RCCG The Expression Center (Uyo). Blue + light/flame brand direction. Built for full WordPress-admin content management.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tec-theme
*/

/* =========================================================
   DESIGN TOKENS
   Palette:
     --tec-midnight : deep night-sky background
     --tec-navy     : elevated panel background
     --tec-blue     : primary brand blue
     --tec-electric : CTA / interactive blue
     --tec-cyan     : glow / highlight accent
     --tec-flame    : warm gold "light" accent (used sparingly)
     --tec-white    : text on dark
   Type:
     Display: 'Fraunces' — a mature, editorial serif with real weight
              and warmth; used at regular/medium weight, never black,
              for a cinematic title-card feel rather than a shouty one.
     Body:    'Sora'
     Utility: 'Space Mono' (eyebrows, labels, timestamps, numbers)
   ========================================================= */

:root{
  --tec-midnight:#070B1F;
  --tec-navy:#0F1A3D;
  --tec-navy-2:#13215099;
  --tec-blue:#1B3B8C;
  --tec-electric:#3D6BFF;
  --tec-cyan:#4FD7FF;
  --tec-flame:#FFC857;
  --tec-flame-dim:#FFC85733;
  --tec-white:#F4F7FF;
  --tec-white-dim:#B7C2E6;
  --tec-line:#28345F;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --maxw:1200px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--tec-midnight);
  color:var(--tec-white);
  font-family:'Sora', system-ui, sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.14;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.3rem,5.6vw,4.2rem); font-weight:480;}
h1 em{font-style:italic; font-weight:440; color:var(--tec-cyan);}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);}
h3{font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:520;}
p{color:var(--tec-white-dim); margin:0 0 1em; font-weight:400;}
a{color:var(--tec-cyan); text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tec-flame);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--tec-flame);
  box-shadow:0 0 10px 2px var(--tec-flame);
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:100px 0;}
.section-tight{padding:64px 0;}
.panel{background:var(--tec-navy);}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:.92rem; cursor:pointer;
  border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  font-family:'Sora', sans-serif;
}
.btn-primary{
  background:linear-gradient(135deg, var(--tec-electric), var(--tec-cyan));
  color:#04122E;
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 30px -10px #3D6BFF88;}
.btn-ghost{
  background:transparent; border:1px solid var(--tec-line); color:var(--tec-white);
}
.btn-ghost:hover{border-color:var(--tec-cyan); color:var(--tec-cyan); transform:translateY(-3px);}
.btn-flame{
  background:var(--tec-flame); color:#241600;
}
.btn-flame:hover{transform:translateY(-3px); box-shadow:0 14px 30px -10px #FFC85788;}

/* =========================================================
   PRELOADER — brief "ignition" before the hero appears
   ========================================================= */
#tecPreloader{
  position:fixed; inset:0; z-index:9999; background:var(--tec-midnight);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
#tecPreloader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.tec-preloader-flame{
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--tec-flame), var(--tec-electric) 60%, transparent 75%);
  animation:tec-flame-pulse 1.1s ease-in-out infinite;
  filter:blur(1px);
}
@keyframes tec-flame-pulse{
  0%,100%{transform:scale(.85); opacity:.7;}
  50%{transform:scale(1.15); opacity:1;}
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.tec-nav-wrap{
  position:fixed; top:18px; left:0; right:0; z-index:999;
  display:flex; justify-content:center; padding:0 16px;
}
.tec-nav{
  width:100%; max-width:1080px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 10px 18px;
  background:#0B1230CC;
  backdrop-filter:blur(16px);
  border:1px solid #ffffff14;
  border-radius:999px;
  transition:border-color .3s, background .3s;
}
.tec-nav.is-scrolled{background:#0B1230F2; border-color:#ffffff22;}
.tec-brand{display:flex; align-items:center; gap:10px; color:var(--tec-white); font-family:'Fraunces', serif; font-size:1rem;}
.tec-brand img{height:34px; width:34px; border-radius:8px; object-fit:cover;}
.tec-menu{display:flex; gap:6px; list-style:none; margin:0; padding:0;}
.tec-menu a{
  color:var(--tec-white-dim); font-size:.9rem; padding:9px 14px; border-radius:999px; transition:.25s; font-family:'Sora', sans-serif;
}
.tec-menu a:hover, .tec-menu a.is-active{color:var(--tec-midnight); background:var(--tec-cyan);}
.tec-nav-cta{display:flex; align-items:center; gap:8px;}
.tec-burger{display:none; background:none; border:0; color:var(--tec-white); font-size:1.4rem;}
@media (max-width:900px){
  .tec-menu{
    position:fixed; inset:80px 16px auto 16px; flex-direction:column;
    background:#0B1230F5; border:1px solid #ffffff1a; border-radius:22px; padding:16px;
    transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:.3s var(--ease);
  }
  .tec-menu.is-open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
  .tec-menu a{padding:12px 16px;}
  .tec-burger{display:block;}
  .tec-nav-cta .btn-ghost{display:none;}
}

/* =========================================================
   HERO — cinematic: letterbox bars, film grain, slow Ken-Burns drift
   ========================================================= */
.tec-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:160px 0 100px;
  background:var(--tec-midnight);
  overflow:hidden;
}
.tec-hero-bg{
  position:absolute; inset:-5%; z-index:0;
  background:
    radial-gradient(60% 50% at 18% 20%, #1B3B8C66, transparent 60%),
    radial-gradient(50% 40% at 85% 15%, #FFC85726, transparent 65%),
    radial-gradient(80% 60% at 50% 100%, #0A1440, var(--tec-midnight) 70%);
  animation:tec-kenburns 22s ease-in-out infinite alternate;
}
@keyframes tec-kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(-1.5%,-1%);}
}
.tec-hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(#ffffff10 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 72%);
}
.tec-letterbox{
  position:absolute; left:0; right:0; height:38px; background:#000;
  z-index:5; transform:scaleY(0); transform-origin:top;
  animation:tec-letterbox-in 1s var(--ease) .1s forwards;
}
.tec-letterbox.top{top:0;}
.tec-letterbox.bottom{bottom:0; transform-origin:bottom;}
@keyframes tec-letterbox-in{to{transform:scaleY(1);}}
@media (max-width:700px){.tec-letterbox{height:20px;}}

.tec-hero-inner{position:relative; z-index:2; max-width:820px;}
.tec-hero h1{
  margin:.3em 0;
}
.tec-hero .word-reveal{display:inline-block; opacity:0; filter:blur(6px); transform:translateY(14px); animation:tec-word-in .9s var(--ease) forwards;}
@keyframes tec-word-in{to{opacity:1; filter:blur(0); transform:translateY(0);}}

.tec-hero p.lead{font-size:1.1rem; max-width:560px; opacity:0; animation:tec-fade-up .9s var(--ease) .5s forwards;}
.tec-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; opacity:0; animation:tec-fade-up .9s var(--ease) .7s forwards;}
@keyframes tec-fade-up{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.tec-hero-meta{
  margin-top:56px; display:flex; gap:34px; flex-wrap:wrap;
  font-family:'Space Mono', monospace; font-size:.8rem; color:var(--tec-white-dim);
  opacity:0; animation:tec-fade-up .9s var(--ease) .9s forwards;
}
.tec-hero-meta strong{display:block; color:var(--tec-white); font-family:'Fraunces', serif; font-size:1.05rem; margin-bottom:2px; font-weight:500;}

.tec-flame-orb{
  position:absolute; width:340px; height:340px; border-radius:50%;
  right:-60px; top:120px; z-index:1;
  background:radial-gradient(circle at 35% 30%, #FFC857, #3D6BFF 55%, transparent 72%);
  filter:blur(10px); opacity:.5;
}

/* scroll reveal — fade + slight blur, more filmic than a plain slide-up */
.reveal{opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-stagger > *{opacity:0; transform:translateY(22px); filter:blur(3px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.18s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.34s;}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.42s;}

/* parallax layers (JS sets --parallax-y) */
.tec-parallax{ transform: translateY(calc(var(--parallax-y, 0) * 1px)); will-change: transform; }

/* =========================================================
   ABOUT / VALUES / MISSION
   ========================================================= */
.tec-about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start;}
@media (max-width:860px){.tec-about-grid{grid-template-columns:1fr;}}
.tec-quote-card{
  background:linear-gradient(160deg, var(--tec-blue), #0C1B47);
  border-radius:var(--radius-lg); padding:34px; border:1px solid #ffffff14;
}
.tec-quote-card h3{font-style:italic; font-weight:440;}
.tec-values{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:20px;}
@media (max-width:760px){.tec-values{grid-template-columns:repeat(2,1fr);}}
.tec-value-card{
  background:var(--tec-navy); border:1px solid var(--tec-line); border-radius:var(--radius-md);
  padding:20px 16px; text-align:center; transition:.35s var(--ease);
}
.tec-value-card:hover{transform:translateY(-6px); border-color:var(--tec-cyan); box-shadow:0 16px 30px -18px #4FD7FF66;}
.tec-value-letter{
  font-family:'Fraunces', serif; font-size:1.5rem; color:var(--tec-flame);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px; background:var(--tec-flame-dim);
}
.tec-value-card h4{font-size:.95rem; margin:0 0 4px; font-family:'Sora'; font-weight:600;}
.tec-value-card p{font-size:.82rem; margin:0;}

/* =========================================================
   CREED IGNITION — signature moment
   ========================================================= */
.tec-creed{
  background:var(--tec-midnight);
  position:relative;
  padding:110px 0;
}
.tec-creed-lines{max-width:760px; margin:0 auto;}
.tec-creed-line{
  font-family:'Fraunces', serif; font-weight:460; font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.6rem); line-height:1.55;
  color:#3A4472; margin:0 0 .3em; transition:color 1s ease, text-shadow 1s ease;
}
.tec-creed-line.is-lit{
  color:var(--tec-white);
  text-shadow:0 0 22px #4FD7FF88, 0 0 46px #FFC85733;
}

/* =========================================================
   TEAM / PASTOR — couple picture frames
   ========================================================= */
.tec-pastor-block{display:flex; flex-direction:column; gap:80px;}
.tec-pastor-duo{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;
}
@media (max-width:860px){.tec-pastor-duo{grid-template-columns:1fr;}}
.tec-couple-frames{display:flex; gap:16px;}
.tec-picture-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; flex:1;
  aspect-ratio:4/5; background:linear-gradient(160deg,var(--tec-blue),var(--tec-navy));
}
.tec-picture-frame img{width:100%; height:100%; object-fit:cover;}
.tec-picture-frame .placeholder-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px; font-family:'Space Mono'; font-size:.72rem; color:var(--tec-white-dim); letter-spacing:.04em;
}
.tec-picture-frame .tec-glow-ring{
  position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background:conic-gradient(from 0deg, var(--tec-cyan), var(--tec-flame), var(--tec-electric), var(--tec-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:tec-spin 7s linear infinite;
}
@keyframes tec-spin{to{transform:rotate(360deg);}}
.tec-name-tag{
  position:absolute; bottom:10px; left:10px; right:10px;
  background:#04081AD0; backdrop-filter:blur(6px); border-radius:12px;
  padding:8px 12px; font-family:'Space Mono'; font-size:.68rem; color:var(--tec-white); text-align:center;
}

.tec-minister-scroll{
  display:flex; gap:20px; overflow-x:auto; padding:8px 4px 22px; scroll-snap-type:x mandatory;
}
.tec-minister-scroll::-webkit-scrollbar{height:6px;}
.tec-minister-scroll::-webkit-scrollbar-thumb{background:var(--tec-line); border-radius:6px;}
.tec-minister-card{
  flex:0 0 220px; scroll-snap-align:start; background:var(--tec-navy);
  border:1px solid var(--tec-line); border-radius:var(--radius-md); overflow:hidden;
  transition:.35s var(--ease);
}
.tec-minister-card:hover{transform:translateY(-6px); border-color:var(--tec-cyan);}
.tec-minister-card .photo{aspect-ratio:1/1; background:var(--tec-blue); overflow:hidden; position:relative;}
.tec-minister-card .photo img{width:100%; height:100%; object-fit:cover;}
.tec-minister-card .info{padding:14px 16px;}
.tec-minister-card h4{margin:0 0 2px; font-size:.95rem; font-family:'Sora'; font-weight:600;}
.tec-minister-card p{margin:0; font-size:.78rem; color:var(--tec-flame);}

/* =========================================================
   SERMONS
   ========================================================= */
.tec-sermon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){.tec-sermon-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.tec-sermon-grid{grid-template-columns:1fr;}}
.tec-sermon-card{
  background:var(--tec-navy); border:1px solid var(--tec-line); border-radius:var(--radius-md);
  padding:20px; transition:.35s var(--ease); display:flex; flex-direction:column; gap:10px;
}
.tec-sermon-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -22px #00000088; border-color:var(--tec-electric);}
.tec-sermon-date{font-family:'Space Mono'; font-size:.72rem; color:var(--tec-white-dim);}
.tec-sermon-card h4{margin:0; font-size:1.02rem; font-family:'Fraunces'; font-weight:520;}
.tec-locked{
  font-size:.78rem; color:var(--tec-flame); display:flex; align-items:center; gap:6px;
}

/* =========================================================
   ANNOUNCEMENTS
   ========================================================= */
.tec-announce-list{display:flex; flex-direction:column; gap:2px;}
.tec-announce-item{
  display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:center;
  padding:20px 8px; border-bottom:1px solid var(--tec-line); transition:.3s;
}
.tec-announce-item:hover{background:#ffffff06; border-radius:14px;}
.tec-announce-item .tag{
  font-family:'Space Mono'; font-size:.7rem; color:var(--tec-flame); text-transform:uppercase;
}
@media (max-width:640px){.tec-announce-item{grid-template-columns:1fr; gap:6px;}}

/* =========================================================
   BOOK POPUP
   ========================================================= */
.tec-book-modal{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:#04081AE0; backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.tec-book-modal.is-open{opacity:1; pointer-events:auto;}
.tec-book-modal-card{
  max-width:440px; width:100%; background:linear-gradient(165deg,var(--tec-navy),var(--tec-midnight));
  border:1px solid #ffffff1c; border-radius:var(--radius-lg); padding:30px;
  transform:translateY(18px) scale(.97); transition:.5s var(--ease);
}
.tec-book-modal.is-open .tec-book-modal-card{transform:translateY(0) scale(1);}
.tec-book-modal .close{
  float:right; background:none; border:0; color:var(--tec-white-dim); font-size:1.3rem; cursor:pointer;
}
.tec-book-cover{
  width:110px; aspect-ratio:2/3; border-radius:8px; object-fit:cover; float:left; margin:0 18px 10px 0;
  box-shadow:0 16px 30px -14px #000000cc;
}

/* =========================================================
   PORTAL (register / login / dashboard / attendance confirm)
   ========================================================= */
.tec-auth-wrap{max-width:460px; margin:0 auto;}
.tec-card{
  background:var(--tec-navy); border:1px solid var(--tec-line); border-radius:var(--radius-lg); padding:32px;
}
.tec-field{margin-bottom:16px;}
.tec-field label{display:block; font-size:.82rem; color:var(--tec-white-dim); margin-bottom:6px;}
.tec-field input{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1px solid var(--tec-line);
  background:#0B1230; color:var(--tec-white); font-size:.95rem; font-family:'Sora';
}
.tec-field input:focus{outline:2px solid var(--tec-cyan); outline-offset:1px; border-color:transparent;}
.tec-form-msg{font-size:.85rem; padding:10px 12px; border-radius:10px; margin-bottom:14px;}
.tec-form-msg.error{background:#4A1330; color:#FF9EBB;}
.tec-form-msg.success{background:#0F3A2C; color:#7CF2C0;}

.tec-attend-card{
  background:linear-gradient(150deg,var(--tec-blue), #0B1230);
  border-radius:var(--radius-lg); padding:28px; border:1px solid #ffffff1c; text-align:center;
}
.tec-attend-card .code-input{
  text-align:center; letter-spacing:.3em; font-family:'Space Mono'; font-size:1.3rem; text-transform:uppercase;
}
.tec-attend-done{
  background:#0F3A2C; border:1px solid #1E5A44; border-radius:var(--radius-lg); padding:28px; text-align:center;
}
#tec-scan-reader{border-radius:var(--radius-md); overflow:hidden; margin-top:14px; display:none;}
#tec-scan-reader.is-active{display:block;}

/* =========================================================
   FOOTER
   ========================================================= */
.tec-footer{
  background:#050815; padding:70px 0 30px; border-top:1px solid var(--tec-line);
}
.tec-footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
@media (max-width:760px){.tec-footer-grid{grid-template-columns:1fr;}}
.tec-footer h5{font-family:'Fraunces', serif; font-weight:520; font-size:.9rem; color:var(--tec-flame); margin-bottom:14px;}
.tec-footer a{color:var(--tec-white-dim); display:block; margin-bottom:8px; font-size:.9rem;}
.tec-footer a:hover{color:var(--tec-cyan);}
.tec-fine{margin-top:50px; padding-top:20px; border-top:1px solid var(--tec-line); font-size:.78rem; color:var(--tec-white-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.badge-theme{
  font-family:'Space Mono'; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tec-midnight); background:linear-gradient(120deg,var(--tec-cyan),var(--tec-flame));
  padding:8px 16px; border-radius:999px; display:inline-block;
}