@import "tailwindcss/base";
@import "base/base.css";

@import "tailwindcss/components";
@import "components/components.css";

@import "tailwindcss/utilities";
@import "utilities/utilities.css";

@import "video/video.css";

@import "pages/home.css";
@font-face {
  font-family: "PP Neue Machina Inktrap Light";
  src: url(/assets/PPNeueMachina-InktrapLight.otf) format('opentype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Machina Inktrap Regular";
  src: url(/assets/PPNeueMachina-InktrapRegular.otf) format('opentype');
  font-style: normal;
  font-weight: normal;
}

html,
body {
  @apply font-paragraphs;
}

h1 {
  @apply font-headings text-5xl md:text-6xl;
}

h2 {
  @apply font-headings text-5xl md:text-5xl;
}

h3 {
  @apply font-headings text-3xl md:text-4xl;
}

h4 {
  @apply text-xl font-semibold md:text-2xl;
}
@import "./navbar.css";
nav {
  @apply text-coffee bg-brunswick sticky top-0 z-20 space-y-7 text-sm uppercase tracking-wider md:text-base;
}

nav ul {
  @apply flex items-center justify-center gap-x-5 first:pt-8 last:pb-8 md:gap-x-8;
}

nav li {
  @apply hover:underline-offset-5 hover:underline hover:decoration-1;
}

nav li.current-path {
  @apply underline-offset-5 font-semibold underline decoration-white decoration-1;
}
.home-page-verse {
  text-align: justify;
  word-spacing: 2rem;
  line-height: 1.5;
  padding-bottom: 1em;
  font-size: 5em;
}

.home-page-verse h2 {
  line-height: inherit;
  font-size: 5em;
  font-family: "PP Neue Machina Inktrap Light", sans-serif;
}

.forward-home-page-logo {
  display: inline-block;
  transform: scaleX(1.2) scaleY(0.8);
  position: relative; 
  margin-bottom: 0; 
}

.copyright-symbol {
  font-size: 0.3em;    
  vertical-align: super;
  position: absolute;   
  top: -0.5em;       
  right: -1em;       
}

.forward-logo-date {
  display: inline-block;
  transform: scaleX(1) scaleY(0.8);
  margin-top: -0.5em; 
}
.bold-text{
  font-weight: 900;
}
    

.home-word-spacing{
    word-spacing: 0.5em;
}
.home-letter-spacing {
  letter-spacing: 2.5em;
}

.foward-image {
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

.foward-image-verse {
    text-align: justify;
    position: absolute;
    bottom: 8px;
    right: 16px;
    word-spacing: 2rem;
}

.foward-image-verse h2 {
  line-height: inherit;
  font-size: 4em;
}

.foward-word-spacing{
    word-spacing: 1.5em;
}

.foward-icons {
    padding-top: 3em;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    font-size: 3em;
}
/*troll css*/
#scroll-container {
  width: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 2rem;
  text-align: center;
  transition: all 0.5s ease;
}

.fake {
  color: FF7702;
}

#real-content {
  display: none;
  color: #FF7702;
}
@media (max-width: 700px) {
}

@media (max-width: 700px) {

.home-page-verse{
font-size: 2.5rem;
word-spacing: 1.5rem;
}


.foward-image-verse h2 {
    padding-top: 2em;
    padding-left: 0.5em;
    font-size: 1.5rem;
    word-spacing: 1rem;
}

.home-letter-spacing {
  letter-spacing: 1em;
}
.home-word-spacing{
  word-spacing: 0em;
}
}
/* SCROLLING ANIMATION */
.scroller--container {
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 10%,
    white 90%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller--content {
  animation: marquee 60s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* VERTICAL SCROLLING ANIMATION */
.vertScroller--content {
  animation: vertMarquee 15s linear infinite;
}

@keyframes vertMarquee {
  to {
    transform: translateY(-50%);
  }
}

/* SPINNING ANIMATION */
.icon--spin {
  animation: iconSpin 30s linear infinite;
}

@keyframes iconSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* IMAGE DARKEN OVERLAYS */
.image-overlay-darken {
  border-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) fill 1;
}
@import "./animations.css";
@import "./overlays.css";
.hero-video-wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.hero-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

/* Mobile-specific styles - video stretches full screen */
@media (max-width: 768px) {
.hero-video-wrapper {
height: 100vh;
max-width: none;
}

.hero-video {
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
}
}

/* Desktop styles - maintain aspect ratio */
@media (min-width: 769px) {
.hero-video-wrapper {
height: 100vh;
max-width: 100vw;
}

.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
}

.video-overlay h3,
.video-overlay .button {
pointer-events: auto;
}

.video-content {
text-align: center;
}

.video-content h3 {
font-size: 23px;
color: white;
margin-bottom: 20px;
}

.button {
font-size: 23px;
font-family: "Arbiet";
text-decoration: none;
color: #bf8eea;
border: 2px solid #bf8eea;
padding: 10px 25px;
border-radius: 50px;
transition: 0.3s ease-in-out;
}

.button:hover {
background-color: #bf8eea;
color: white;
}

.video {
position: absolute;
z-index: -1;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */